Featured Image taking over site header. How to stop it?

[user]

This should work:

.is-phone .blog-post-cols-3 {width:100%;}

 

 

[doland]

Oh nice! it worked. thanks bud. So I went into the Global Custom CSS and it looks like I already had code in there from this forum:

.is-desktop #sitewide-top-widget-area {display:none;}
.blog-post-cols-3:nth-of-type(3n+1) {clear:both;}

@media only screen and (max-width:768px) {
.blog-post-cols-3:nth-of-type(3n+1) {clear:none !important;}
.blog-post-cols-3:nth-of-type(2n+1) {clear:both;}
}

After removing and putting it back, I see that this code is what makes that “Hey mobile user” widget show up on mobile:
.is-desktop #sitewide-top-widget-area {display:none;}

I assume the other code is what was previously telling it to show one column on mobile but no longer words on Xtreme? Just wondering why your code and this one both say “cols-3” instead of cols-1 or something.

 

[user]

Here’s the source for the code.

I couldn’t get other versions to work…

https://forum.weavertheme.com/forums/topic/masonry-blog-page-not-fully-responsive/

[scrambler]

@user. which one did you try exactly that did not work?

because the second one is the same as the first but only applies to Phone, if that does not work it may need !important

The last one is just a modification of the device selector to attach the page selector.

[user]

@scrambler.  Sorry for the misunderstanding.

By “other versions” I had in mind something similar to what doland wrote, during  my testing of  ““cols-3” instead of cols-1 or something…” when I was working on it .

I tried all variations I could find on this, of “cols-1”  “cols-2” and so forth, plus other similar descriptors, but none worked.

Then I changed tactics and searched the Forum – though that took a while before finding the right words to search, so it would provide useful results.  🙂

I worked backwards through the results and tried each one, but none of the ‘solutions’ worked till I came to your 2017 post.

When I read your 2017 comment, I knew it would work – and it did.

What you wrote matched what I had found.  If I started with 2 columns, the mobile would give me 1 by default.  If I started at more than 2, the mobile would give 2 as the default.

Sometimes the naming logic here is simple to follow, and sometimes it needs rather more insight into the sequencing and processing, beyond just the naming conventions.   🙂

Regards!

[scrambler]

The way to know what you are looking for is to inspect the page with the browser developer tool, so you can see what rules are used to create the style.

You can have a look at the guide article below for some pointers

Browser Developer Tools and Code Validation – Weaver Xtreme Guide (weavertheme.com)

 

[hkp]

Thank you. Yes I did that. But while some is quite intuitive, some is much less intuitive as to what is next. 🙂
Will re-read the pointers for more insight. Thanks for reminding me of that.

[scrambler]

If you need guidance on how to figure out selectors to create custom CSS rules, feel free to post here, we are happy to help you learn how to figure it out 🙂

[hkp]

@Scrambler

Thank you! May take you up on that at a quieter time 🙂

[Author]

Posts