Best and Responsive Way of Adding Contact Information To Top of Page Using CSS

Hi Guys

First of all, I’d just like to say thank you in advance for any assistance.

I have recently launched the following website, which features the contact details, opening times etc at the top of the page.

However I’m not fully happy with the way the contact information at the top works.

I’ve added ccs3 text shadow effects but this doesn’t render well on some mobile devices. Additionally the positioning doesn’t work as well as I would like it to, for example on the iphone the text on the right is much taller than the logo, wheareas I want them to be the same height.

Would any one be able to provide advice on the best way of coding this? Again, thanks again for any assistance.

Didcot84

Hi,

This sounds more a question of logistics and design rather than a straight css question.:slight_smile:

I’ve added ccs3 text shadow effects but this doesn’t render well on some mobile devices.

The shadow you’ve added is pretty heavy and I would suggest that for smaller devices you go for a very subtle shadow instead; which you can easily do via your media queries.

for example on the iphone the text on the right is much taller than the logo, wheareas I want them to be the same height.

You seem to have answered your own question there and the answer is simply that all that text won’t fit on a smaller screen so you have to make some compromises. I would be inclined to just keep the email and telephone information visible at smaller screens widths (using media queries to hide the unwanted text) and then perhaps duplicate the opening times and other text on the footer instead.

If you really need all that text in the top section then perhaps re-arrange it to be under the logo at smaller screen widths instead of at the side.

The question is really more one of design than straight css and it all depends on what your goals are? You can’t fit the same information into smaller screen sizes so think what’s important and what needs to be at the top. Perhaps a smaller logo or revised text or moving the text as mentioned above. It’s all a matter of logistics:)

The text-shadow is really heavy and not really adding to the aesthetics to the design, imo.

I’d do what Paul suggested, redesign the contact information and, for smaller screens, have it drop just below the logo. Just “dropping” content sections vertically for smaller screens isn’t always the solution but in this case, as it’s fundamental info and should be one of the first sections visible, I think having that info below the logo is the most sensible approach.

Thanks so much for the information. Could you just point me in the direction of a page that would show me how to add media queries for different screen sizes?

Thanks

Didcot84

Hi,

Here’s some reading for you.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
http://mobile.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/

If you are still unsure or have problems after reading that lot then just come back and ask for more specific advice.:wink:

Hello Paul

Sorry for the delay, I’ve been on holiday, but I’ll read up on those pages and that should do the job.

Thanks again for sending the links through

Daniel