Header width change for smaller devices!?

[Maruf]

Hi Guys,

I have trouble getting the header row right, when I resize the screen, the row splits into two (Image2) while for bigger screens it remains as one row with two columns. I would like to keep the columns next to each other all the time (Image1). Apologies in advance if I have missed an earlier post, I looked everywhere could not resolve it. Please see the screen shots below:

Image1

Image2

[christopher]

Hi there,

Actually, that is the normal behavior of the columns inside a section. the thing is that our theme already has a header section and you want to add a header inside the builder which is not a function offered out of the box.

The solution for that is you add a class to the wrapping section of those columns. You can add a class to the section by going to the Layouts tab of the Cornerstone and clicking the magnifying glass icon of the mentioned section:

Then you need to click on the Customize tab and you will see a section to add the class. For example, add the nostack class there:

Then you will need to add the CSS code below to X > Launch > Options > CSS:

@media (max-width: 767px) {
 .nostack .x-column {
    width: 48%;
    float: left;
    margin-right: 2%;
 }   
}

Please kindly consider that this is considered as a customization and is outside of our support scope. We will not be able to implement or maintain the code for you and you will need to do the rest yourself.

Thank you for your understanding.

[Maruf]

@christopher.amirian

CSS code below to

Well, the above did not solve the problem but I have managed it in an alternative way. Thanks anyways!

[thai]

Glad you’ve sorted it out