Need help? Check out our Support site, then


mobile view all messed up

  1. Help,
    I thought I was doing well!! I'm using the oxygen them with the showcase feature home page. I'm trying to get my front page to look like a website (no blogs). Eventually, I was able to do this with the widgets by moving them around.

    The three boxes on the left and the top phone icon are all in the primary side-bar......the three horizontal boxes and the text box are all in footer widget area 1 (wouldn't work in the others widget areas)

    IT LOOKS RUBBISH ON MY IPHONE (I've switched the mobile version off) but it still looks bad, all the boxes are out of line.......Where do I start to alter them? Can someone point me in the right direction?????

    My Site is: http://www.thesecretinvestor.co.uk

    Thanks in advance :)

  2. Hi! To give you a little better direction… what you'll probably want to do is setup media queries and target the boxes you wanted to add to show up with different widths based on the viewer's screen size. For example, you might want boxes to be 33% wide for large screens and 100% wide for small mobile screens. If you combined something like that with the "float" property, that would probably do the trick.

    This is a great article that talks about media queries if you want to dive into learning those:
    http://css-tricks.com/css-media-queries/

  3. Hi designsimply,

    Thanks that sounds good... I've been looking all day for the style sheets and the html code relating to the different size views, so I can adapt them. Where would I find them as they don't seem to be filed with the normal sheets?

  4. Where would I find them as they don't seem to be filed with the normal sheets?

    You may have to make them—this will depend on which theme your'e using. Some themes have media queries already included and some do not. Anything listed in the "responsive layout" category should have media queries included:

    http://theme.wordpress.com/themes/features/responsive-width/

    If your theme doesn't include any media queries, then you need to create your own. What you'll want to do is setup a few different ones to target various screen sizes (the article I linked before has some examples), and then just add the CSS you want to apply just to each size inside the appropriate media query block.

Topic Closed

This topic has been closed to new replies.

About this Topic