Archived topic
How to add a Responsive Grid to the theme columns
3 replies · Started by Mauricio on August 18, 2020
If you go to this page. You can see there are some ads in the right column.
If you resize to mobile, those ads are moved to the main content.
The first ad moves after the first paragraph...
How can I replicate this?
https://www.thebalancecareers.com/sample-letter-format-2063479
UPDATE
I've been able to replicate this within an article with GENERATEBLOCKS, but how can I apply this to the whole theme. I want this functionality to be native to the whole site.
Thanks!
Hi there,
I believe you would need to add the ads in both places.
When you add the ad to the content, wrap it in an element which hides it on desktop:
<div class="hide-on-desktop">
Content ad here.
</div>Thanks Tom, but that's not it... that's exactly what I want to avoid doing.
If you check the code, you can see it's the same ad.
Hi there,
tricky one without duplicating the advert.
That site is actually inserting it into the main content and on larger devices its absolutely positioning it to the side.
Thoughts:
1. Create the narrower content by having left and right sidebars displayed.You can leave them empty by adding a HTML widget with just a HTML <!-- comment --> inside of that.
2. Place the advert inside the post content. And whatever container its in give it a class so we can target it.
If you have a test site like that set up on we could take a look.
