Content width on devices

  • Hello all,

    I’m having issues with the width of, specifically, the content of my site on devices. When viewed on an iphone, for example, the content is scaled down to a column a third the size of the screen (the header and footers display correctly).

    I’ve tried several versions of the viewport meta tag with no luck.

    Here’s a page of the site: https://rhondagarelick.com/biography/

    Thanks. Any and all help is greatly appreciated.

Viewing 4 replies - 1 through 4 (of 4 total)

  • this is because your div css is:

    .site-content
{
max-width:60%;
}

    you need to change or overwrite this. you can perform media query (change device width to suited devices:

    @media only screen and (max-width: 481px)
{
.site-content
{
width:100%;
}
}
    Thread Starter JMickeyD

    (@jmickeyd)

    Thanks for your help MrYawn. I initially thought that the max-width setting on the site content was the problem. But changing that to 100% didn’t fix the issue.

    Adding the @media query code didn’t resolve the problem either.

    Any thoughts? Thanks again.

    You need to change the max-width too.

    @media only screen and (max-width: 481px)
.site-content {
width: 100%;
max-width: 90%;
}

    as for the header, you need to remove the fixed with on the actual table, or use !important in your CSS

    .site-header table
{
width:100% !important;
}
    Thread Starter JMickeyD

    (@jmickeyd)

    Thanks for your follow up. I made the changes you suggested above, but now everything has been condensed into a column about a third of the screen size on the iPhone–before it was just the content, but now the header is also being crunched down.

    And again, changing the .site-content max-width parameters from 60% to 100% doesn’t seem to affect the display on the iPhone at all.

    Thanks for the help,
    J

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Content width on devices’ is closed to new replies.