Mobile theme

Hi

The theme is responsive by default, it looks like your child theme is overwriting
the mobile styles.

That’s what I thought that Aaron had a mobile theme but I don’t know where in my child theme I’ve stepped on it. If I send you the function.php and the style.css files, can you review them and let me know what I’ve done to overwrite the mobile style? Or maybe I did something in the header.php file?

Thanks for your help.

Cynthia

Hi
in Aaron, I am using media queries at certain widths to make sure that the content is wide enough. But since the child theme style.css is loaded after, it is overwriting these rules.

In the child theme, you have these two passages that is overwriting the parent theme’s mobile width.
These two changes the width of the main content and the sidebar, no matter what the size of the browser window is.

.content-area {
    float: left;
    margin: 0 -25% 0 0%;
    padding: 1% 2% 0 2%;
    width: 72%;
}

and

.site-content .widget-area {
    float: right;
    margin: 1% 2% 0 2%;
    padding: 1% 2% 0 2%;
    overflow: hidden;
    width: 28%;
}

You can try wrapping these two inside

@media screen and (min-width: 1100px){

}

Then the widths should only affect browser windows more than 1100px wide.
You might find this to be too wide, you can change the number to anything you want.

Thank you very much! I was able to modify my child style.css and fix the problem for the mobile theme on the user’s iPhone 6 using your wrapping suggestion. In addition to the above, I discovered I had another place with .content-area set up with different margin, padding, and width. Conflict right there. So I took that out! Then I changed the .site-content .widget-area from 28% to 25% and let the main content fit better in the smaller window. See https://events.stcwdc.org/ on a phone.

All is well with the other sites except for the home page on https://wdcb.stcwdc.org/, which keeps the main content column very narrow and a long scroll down the page with the sidebar continuing below that in the same narrow column. This may be because there is a CSS div right and div left area for some images that aren’t collapsing but I would think that would help extend the main content column across the screen. I will try wrapping that in a 100% div if it isn’t already.

Thank you.

• This reply was modified 6 years, 4 months ago by sleeplessindc. Reason: took out second problem to make it separate post

Problem solved. The table was using em for widths. I switched to percent and now it is all scalable and the content fills the screen as it should.