How to adjust width for mobile phone? "@media screen"?

  • Resolved dougjoseph

    (@dougjoseph)


    11 years, 5 months ago

    We love this theme! It is wonderful. We are basing a child theme on it, and we have everything working great except one thing. Because of our needs, we had to tweak the index page, splitting its main body area into two columns, and adding some tweaks in the header area where our logo gets displayed.

    When viewing our site in a regular browser, it works great. However, when viewing it in a smart phone browser, the “content” area is less than half the width of the page.

    I see a section in the style sheet labeled “MEDIA QUERIES & DEVICE STYLES”

    I’m guessing that’s where I’d tweak things to adjust the width. Although I’m usually pretty good at sorting out CSS issues, I’m a newbie when it comes to CSS for media devices, and I’m stumped.

    The site is https://whitestonepublishing.com/

    Thanks if anyone can help me get off dead center on this. Not afraid to dig in, and have been trying for a while, but realizing I need help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter dougjoseph

    (@dougjoseph)

    I tried changing the first line from 480px to 580px, but it had no effect:

    @media screen and (max-width: 580px) {

    }

    Thread Starter dougjoseph

    (@dougjoseph)

    The width of the body content now appears to be about 300 px. Need to increase that to about 580 px.

    Thread Starter dougjoseph

    (@dougjoseph)

    I found out how to use the CSS to get done what was needed. It was not a matter of changing the device’s screen definition, but a matter of including the needed CSS changes inside that definition.

    So… this:

    @media screen and (max-width: 480px) {

}

    …needs to become something like this:

    @media screen and (max-width: 480px) {

.col320 {
	width: 97.888%; /* normally width 33.888% (about 320px), but for mobile, we want fuller width
	display: inline;
	float: left;
	margin-left: 1%;
	margin-right: 0;
	position: relative;
	} 

}

    The CSS for .col320 exists elsewhere in the style sheet, with a narrower width. It is duplicated here and other screen definitions, as needed, with the wider width.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to adjust width for mobile phone? "@media screen"?’ is closed to new replies.