WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Display full site on mobile screen (11 posts)

  1. katesiraj
    Member
    Posted 1 year ago #

    Hi there,
    I have a website, template is child theme of twenty twelve.
    barbarafrostdesign.com
    On a computer at any width of browser, it looks fine. Content, menus etc all fixed width and don't mess around when browser is made smaller.
    However, on a mobile, it pushes all the writing and pictures in the content section around to fit the size of the mobile screen (although the header and menu bar are still 960px width if you scroll across).
    How do I get it so that when the site is opened on a mobile phone, the user sees the whole width and height of the site (i.e. fully zoomed out) and looking like it does on a computer screen?
    Thanks so much for any help,
    Kate

  2. Klick Design
    Member
    Posted 1 year ago #

    You have made some mistakes in your css styles, rem values are important and also % values, although you have some.
    I would create child .css from scratch, start with simple things like text color but when you get to menu and body, check your child as you go which will tell you where you might have gone wrong.
    Sounds drastic but you can rename the current .css so you have a reference point for colors etc.
    Use the inspect on fire bug it will help.
    One thing I did notice you have .site-header h1 min-width: 960px;

  3. Klick Design
    Member
    Posted 1 year ago #

    Don't know if you are also aware but you have broken links in the pages.

  4. katesiraj
    Member
    Posted 1 year ago #

    Oh no, really?! I though it would be just a piece of code about @viewport or something. Thanks for your feedback and also on the links. I have just moved the domain and forgot to change them - classic fail.
    Are you sure there isn't another option?

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Here's the thing - twentytwelve was designed to resize on different devices. If you don't want that, you'll have to totally redo the CSS code... You might be better off finding a theme that does not have that functionality built-in.

  6. katesiraj
    Member
    Posted 1 year ago #

    I have just validated at http://jigsaw.w3.org/css-validator/ and there are some errors but all from the twentytwelve css file. There are 3 errors from my child css sheet, all very minor to do with hypenation. When you say mistakes, what kind of mistakes do you mean? Thanks for your input.

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    Katesiraj, have you considered using a different theme?

  8. katesiraj
    Member
    Posted 1 year ago #

    Thanks WPyogi, I've just seen your comment. I managed to get another website of mine to do it and it was also based on twentytwelve but wasn't a fixed width one but one which expanded widthwise to fit the screen.
    blog.theayurvedapractice.com
    So, I realise that there needs to be another approach. Do you think it is impossible? With theayurvedapractice.com one, I used an @viewport and viewport meta rule.

  9. katesiraj
    Member
    Posted 1 year ago #

    Hi Andrew,
    yes, I did consider it but by that time, I had done so much work on this one that I couldn't face doing it all over again on a new theme. Also, I looked at the themes page and found there were so many, I didn't know which to look for! Do you have a suggestion for one that is similar to 2012 but that isn't made to resize to different devices?
    thanks, Kate

  10. katesiraj
    Member
    Posted 1 year ago #

    Yey, I worked it out. I just had to remove:
    <meta name="viewport" content="width=device-width" />
    from header.php and as my width are all fixed, it all works perfectly!
    Thanks for your advice guys.

  11. hudgins_jeffrey
    Member
    Posted 9 months ago #

    Brilliant solution, Katesiraj! Also, make sure all your custom widths are % and not px so they display properly on mobile devices. :)

Topic Closed

This topic has been closed to new replies.

About this Topic