ninaksimon Posted January 3, 2020 Share Posted January 3, 2020 I'm having a strange problem with my site where it appears that the max-width container on screens above 1200 px goes down to 33%. It looks lousy and I'd like to change it, but I can't figure out how to do so. The site is https://www.ofbyforall.org/ and the problem occurs on blog posts like this one. Using the inspector, I was able to figure out that the width of the container goes from being 100% for every screen smaller than 600px 83.33% for screens 600px - 900px 66.67% for screens 901px - 1200px Then at 1201px, something happens and there's no media query at all, and it defaults to the rule that the width should be 33%. See attached image. This makes blog posts and pages look lousy unless I manually insert spacers on the sides, which I don't want to do. Is there a way I can change this 33% default to something more like 66%? Or is there a way to add a media query to the CSS on the site for screens up to 2000px or something? I would greatly appreciate any CSS suggestions people have for how to solve this. Link to comment
ninaksimon Posted January 4, 2020 Author Share Posted January 4, 2020 Update: I solved it (sort of) using this code:.BlogItem { max-width: 2000px !important; margin: auto !important; } .BlogItem .sqs-block { width: 75% !important; } Link to comment
HollySpice Posted January 11, 2020 Share Posted January 11, 2020 Thank you so much for this solution. I had exactly the same problem and it's been annoying me for ages. This worked a treat. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.