Display full site on mobile screen

  • Resolved katesiraj

    (@katesiraj)


    11 years, 1 month 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

Viewing 10 replies - 1 through 10 (of 10 total)
  • Klick Design

    (@klick-design)

    11 years, 1 month 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;

    Klick Design

    (@klick-design)

    11 years, 1 month ago

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

    Thread Starter katesiraj

    (@katesiraj)

    11 years, 1 month 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?

    WPyogi

    (@wpyogi)

    11 years, 1 month 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.

    Thread Starter katesiraj

    (@katesiraj)

    11 years, 1 month 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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 1 month ago

    Katesiraj, have you considered using a different theme?

    Thread Starter katesiraj

    (@katesiraj)

    11 years, 1 month 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.

    Thread Starter katesiraj

    (@katesiraj)

    11 years, 1 month 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

    Thread Starter katesiraj

    (@katesiraj)

    11 years, 1 month 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.

    hudgins_jeffrey

    (@hudgins_jeffrey)

    10 years, 6 months ago

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Display full site on mobile screen’ is closed to new replies.