[Resolved] Setting a minimum Width for a Repsonsive Grid in Blocks

[Author]

Posts

[DaveR6137]

Tell us what you are trying to do?
I need to ensure that my sidebar - which is created as a grid in a Blocks Template as the top of my pages have full width content - does not shrink below 300px with smaller screen sizes. I've tried changing the % width, but even at 1 70/30 ratio of body to sidebar I'm still getting the sidebar shrinking to 250px when my screen size is 1023px. I'm being specific as i need this in order to be able to display Mediavine adverts

Here's their note:
We need your sidebar adjusted so that it remains a minimum of 300px wide whenever it is beside the content. In addition, the sidebar must remain beside the content on all screens greater than 1023px in width. This ensures that all users on all devices see the ads properly.

So is there a way to ensure that a specific column in a grid has a minimum width? I cannot see any specific settings.

I've tried both inserting a container into this column and used CSS to apply" min-width: 300px;" as well as in the Advanced tab of the Grid Cell and then putting that CSS in my child theme css file as follows..

.minwidthgrid {
min-width: 300px;
}

I'm just not sure what's the best way around this.

An example page - hidden link

Thank you.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

I've checked the example page and noticed that currently, it is showing content, and the sidebar beside each other, up to a screen width of 600px (and on screens with 599px or less width, they are stacked on top of each other).

Maintaining a minimum width of 300px for the sidebar up to 600px screen width would mean that your actual content will get narrower than the sidebar, which won't be very good from the readability and usability perspective.

The good news is that according to the note, "the sidebar must remain beside the content on all screens greater than 1023px", which means you're allowed to show the content and sidebar to show stacked on top of each other, on the screen with widths 1023px or less.

I'll suggest going to WP Admin -> Toolset -> Settings -> General and changing the cut off width for the "Tablets" to "1023" px.
( screenshot: hidden link )

After that, you can adjust the "Column Count" setting in the grid block to "2" for the desktop and "1" for tablet and mobile.

Desktop: hidden link
Tablet: hidden link

As a result, as soon as the screen width would be less than 1024px, the content and the sidebar will stack on top of each other and you'll only have to adjust the column widths of the grid columns for the desktop to something like 65/35 or 60/40, whichever works to keep the sidebar width to a minimum of 300px.
(on tablets and phones the sidebar would be full-width anyway)

I hope this helps and please let me know if you need any further assistance around this.

regard,
Waqar

[DaveR6137]

Thanks Waqar! I did this and then tweaked with the ratios and padding, and the layout now looks OK - and more importantly meets Mediavine's requrements.