Issues with responsive design and appearance

[brand76]

I am using the WP Twenty Twelve theme with the Events Calendar: Facebook Events plug-in. I have the calendar displaying on a page – http://www.thirstyparrotcos.com/events-2/ and it looks fine on a laptop or tablet. Once you move down to a mobile phone, android or iPhone the text gets to be unreadable. I’m pretty new with css and I don’t know how and/or where to find the code to change to do the following:
#1 – remove the following event details and their container – Start, End, Venue, Phone Address.
#2 – keep the text about the event, the event title and date responsive so that it is readable down to 300px.
I’ve searched the forums and cannot find this info, I’ve also scoured google, maybe I’m not searching the right things, but any help would be greatly appreciated.

[Jonah]

Hi brand76,

What you need to do is set styles at specific breakpoints or resolutions so that certains elements display differently or do not display at all. For instance, here is a snippet of common breakpoints you can use to style things differently in these devices and resolutions: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Beyond that I would just suggest reading up more on responsive design and techniques and experimenting.

Good luck!

– Jonah

[brand76]

Thanks Jonah,

How do I remove the event details? I don’t know what the creators called this in the code, I’ve been combing through it and the only solution I’ve come to is to hide it, so that it does not display. Can you tell me where it is in the line of code?

Thanks

[Jonah]

Hi brand76,

What exactly do you mean by the event details?

– Jonah

[brand76]

Hi Jonah,
When you look at this page http://www.thirstyparrotcos.com/events-2/ you will see the event headline, some details about the event and to the right in a white box the specific details. When looking at this on a mobile device, the layout is terrible and unpleasant to read. So, I would like to hide that box. Also, on a mobile device, when you click the event headline and the event details are completely unreadable. The text is displayed vertically down the page, so I’d like to disable the ability to click the headline (which I think I have figured out how, I just haven’t tried it yet). Unless, there is a way to render it better on a mobile device.

Thanks
Brandon

[Jonah]

Hi brand76,

There are numerous ways to hide elements on a page. The easiest but less ideal is setting display: none; – a better option would be something like this: http://css-tricks.com/snippets/css/accessibilityseo-friendly-css-hiding/

I hope that helps!

– Jonah

[brand76]

Thanks for the tip, however, it’s not fixing the issue. I’ve edited the css file trying to use the snippets you’ve directed me to and it’s not changing the layout. Can you help me find the code that displays this table?

[Jonah]

Hi brand76,

I’m not seeing the table anymore so it looks like you figured out how to hide. Is this not the case for you?

[brand76]

Hi Jonah,
Yes, about 15 minutes ago, I figured it out, now I’m just trying to get the width adjusted for the content to span 100%. Thanks, I think we can close this post.

[Jonah]

Sounds good brand76, glad to hear you’re getting it figured out. If you need anything else, please let us know.

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts