Unfortunately, now that the div is next to the logo, it only looks good on desktop computers. Resizing it down to a mobile screen, and the div gets merged with the logo… is there a way to prevent that, and keep the phone number as part of the header in a small screen? Maybe a feature request to implement a phone number field in the header in the theme options?
You’ll need to add adjusted css to the media queries to get the new div looking the way you’d like on the specific devices. Open up the layout.css file and search for #Media Queries. You can either add to the ones here or copy the ones you’ll need to make new rules for into your custom.css file so that you don’t lose the changes when you do a theme update.
I’ll send the request for an additional field in the header but its a pretty low chance since it goes against the very simplistic nature of the design.
I’m trying to do the exact same thing with a phone number. How did you get this to work? I can’t figure out how to get it to call different CSS classes. How would the custom.css need to look for it to pull different styling for desktop, tablet and mobile phone?
Open up the layout.css file and search for #Media Queries. You can either add to the ones here or copy the ones you’ll need to make new rules for into your custom.css file. Each media query checks for the screen size and then outputs the css for that size. So, depending on the items you have added, you’ll customize the css for each query so that the phone number is where you want it as the theme responds to the different devices.
Here is an quick intro about their use if you are unfamiliar: http://webdesignerwall.com/tutorials/css3-media-queries
The topic ‘phone number next to logo, and it's no longer responsive….’ is closed to new replies.