Full Width Columns

[barryovb]

HI.

I am working on content using a global block. I want the content to be full width. I manage to make it full width on smaller screens (480px & smaller) as shown in the screenshot below.

I am finding it difficult to make it span full width on 481px to 979px screens as you can see in the screenshot above.

The global container is turned off already and I expected the content to span full width. I have two columns inside the row and the flexbox child placement for the two columns are set to row.

Maybe I am not doing something right which you can point me to.

Looks like the columns inside a row do not occupy the entire space except if the texts or contents are wide enough. I don’t like this.

I feel there should be an option for our columns to be full width. It should be able to occupy the entire space available around it.

SEE…

I observed that the other columns will be occupying the entire space only if there is a column with enough content that spans through the entire space.

How did I know this?

I added a third column. I then added a headline element to the third column. Observe that in this screenshot below, the other columns are occupying the entire space as I needed them to.

I then edited the texts in the headline element. I made it shorter so it occupied less space as shown in the screenshot below.

You can see that since it’s not occupying the space around, the other columns did not fill the space.

Please fix this for me.

I want the two columns to occupy the entire screen.

Thank you.

[christopher]

Hi Barry,

Please kindly go to the Row settings inside the Row that you have added into the Global block and make sure that you set the options inside the Setup Control Group as follows:

• 

If you still have problems, kindly get back to us with the URL/User/Pass of your website and the name of the Global Block in question using a Secure Note and we will check and give you proper advice.

Thank you.

[barryovb]

Not working.

I just followed those.

Well I have been playing around with those for some days now and still no breakthrough.

I’ll use the secure note.

[barryovb]

I can see some adjustments.

Did you do anything?

If yes, please enlighten me.

[christian]

Hey Barry,

I’m not sure if my colleagues have done anything but upon checking, I only see this:

I checked the FIX global block and I did not find the setup in your screenshots. I saw that in your Mobile Menu global block.

Anyway, the cause of the issue is your custom CSS. You forced the x-row to be a grid. That’s not recommended as if you need a there’s a Grid element in our builder if you need it.

I found that CSS in one of your global blocks. Please remove it. Once removed, your Mobile Menu should span fullwidth.

Hope that helps.

[barryovb]

I saw that it’s functioning properly after I sent the secure note.

Well, thank you so much.

[ruenel]

You are most welcome!