Need help? Check out our Support site, then


Full Frame Theme Not Displaying well on Mobile

  1. I have bought the premium Full Frame theme for wordpress.com and have set everything up so it looks great on the computer. I have even check off the "Include this CSS in the Mobile Theme" box on customization - but the site looks TERRIBLE on Mobile.

    It loses some image sizing when viewed on tablet, which isn't a huge deal, but the ENTIRE layout of the posts page (Main Page "About") looks awful on a smartphone. Try accessing the site from different devices to see for yourself.

    Any idea of CSS to add to help the theme maintain it's integrity across all viewing platforms? This is urgent as we will be running an outdoor marketing campaign in the next week and mobile user experience has to be as seamless as possible.

    - A friend mentioned some sort of bit of CSS to tell the theme not to recognize the difference between mobile and computer browsing, but I'm not sure how to do this.

    The blog I need help with is thefilmstuck.com.

  2. Full Frame is a responsive width theme. Responsive width means the layout adapts depending on the size of the device being used to view your site. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.

    In case you have not done so as yet, go here > Appearance > Mobile and disable the mobile theme.

  3. - A friend mentioned some sort of bit of CSS to tell the theme not to recognize the difference between mobile and computer browsing, but I'm not sure how to do this.

    Maybe they were referring to media queries? But media queries do the opposite of what you've stated. They are used to apply different CSS styling to different screen sizes. Here is a basic overview explaining how they work:
    http://www.peachpit.com/articles/article.aspx?p=1604236&seqNum=2

    Any idea of CSS to add to help the theme maintain it's integrity across all viewing platforms?

    I checked out the Full Frame theme with an iPhone and an iPad, and I think it already does look pretty similar across those types of small screen viewing platforms. It sounds to me like you want to apply your own additional styling to small screen sizes to change the current design just for those screens.

    To do that, I would recommend copying the structure for the media query parts from the existing Full Frame theme CSS and adding in your own design adjustments. I can help you get started.

    Here is the stylesheet for the Full Frame theme from your blog:
    https://s1.wp.com/wp-content/themes/premium/full-frame/style.css?m=1371485634g&minify=false

    If you scroll down or search for "@media," you will be able to find the media queries near the end. Here is the basic structure Full Frame is using:

    @media screen and (max-width: 520px) {
    	/* Put your CSS here. */
    }
    
    @media screen and (max-width: 768px) {
    	/* Put your CSS here. */
    }
    
    @media screen and (max-width: 480px) {
    	/* Put your CSS here. */
    }

    Just add in the design updates you'd like to the different media query blocks depending on what screen size you'd like to target. A max width of 480px will cover iPhones, and the larger max with or 768px will cover ipads. the

    Depending on exactly what you want to change, updating the design for a theme for different screen sizes could take a bit of work. In this forum, we can show you examples and show you how to use the tools to get started if you have more specific design questions.

  4. It loses some image sizing when viewed on tablet, which isn't a huge deal

    I checked http://thefilmstuck.com/ from an iPad and the image sizing looks okay to me. I'm not sure which images you're referring to though. My first concern with a report like this is to check the theme itself to make sure it's working properly. I think in this case the theme is working as intended and you just don't like the way it looks. However, if you think there's a problem with the theme itself, please reply back with a link to the page where you see the problem happening, a description of the image you're referring to, and explain how you're expected it to look compared to how it looks now.

Topic Closed

This topic has been closed to new replies.

About this Topic