Editing mobile theme with CSS

  • Author
  • #1769971


    I was wondering if someone could help me figure out how to edit my site’s mobile theme through CSS? The main issue with the layout is the top part of the home page where the scrolling images are…is there a way to change that so we can see the images scrolling with their descriptions on the mobile theme? Right now it is all squished together and the images are hidden behind the block with their descriptions. Also, I would like to be able to see the site’s header at the top with our Company logo: “Bruker Open Path Chemical Detection”. This is currently not appearing on the mobile theme.

    Another option I want to try if it is not possible to fix these issues through CSS, is to see if we can basically “deactivate” the mobile theme so that the layout will look exactly the same on mobile devices as it does on a computer monitor. I have tried doing this manually through the dashboard, but it doesn’t seem to work. Is there something we can add to the CSS that will completely turn off the mobile theme?

    I appreciate your help!

    The blog I need help with is brukeropenpath.com.


    You are using a responsive width theme which responds to screen and browser window size. There isn’t a separate mobile theme to turn off.

    You can change it back into a fixed width theme, but in many cases that is a complex task overriding all the media rules. If you look at the original theme stylesheet starting at about a third of the way down, all of the media queries are grouped together. All of those would need to be overridden. You could group everything into a single combined media query that would look something like this and set everything back to what the base values were (before the media queries).

    @media only screen and (min-width: 0) and (max-width: 960px)

    Another option would be to actually activate the mobile theme at Appearance > Mobile and take a look at the site. The dedicated mobile theme is a very simplified theme specifically designed for small devices such as phones.

    On the header image, find this in your custom CSS and change “width” to “max-width”.

    .header .logo{

    Then find this in your custom CSS

    @media only screen and (min-width: 480px) and (max-width: 767px)

    and under .header .logo change text-align to left.

    You might want to take a look at the original InfoWay theme demo site while on a tablet and mobile to see how it operates and looks.



    Thank you for your help! I was able to fix the header, however the “Innovation with Integrity” inside the header is not positioning right on the mobile theme…how can I fix that?

    Also, I’m not sure what I did but the image slider and nav do not match up on mobile (especially ipad size screen). I could not find this custom CSS that you were referring to: @media only screen and (min-width: 480px) and (max-width: 767px)…I assume that this is what would correct the slider issue?


    Hi there!

    Sorry for the delay! The code that Richard gave you to find:

    @media only screen and (min-width: 480px) and (max-width: 767px)

    will fix the alignment in mobile sites. This code targets the mobile browser size. I’m not seeing this used in your Custom CSS currently, so just go ahead and add this code:

    @media only screen and (min-width: 480px) and (max-width: 767px) {
    	.header .logo{
    		text-align: left;

    Let me know if I can help with anything else!



    This doesn’t seem to be changing the mobile layout at all…am I adding the code correctly?

    I appreciate your help!


    This is what I see on my simulator for an iPhone, and it agrees with what I see on my actual iPhone.


    Where are you wanting the tagline/description?

The topic ‘Editing mobile theme with CSS’ is closed to new replies.