Aligning a column under header menu

[cxander]

I’m using the renew stack of the X Theme, (not pro) and under the header on the home page I have a row with one column that I set a max width and height. Currently I have added custom CSS to set that column to be located 65% of the pages width. However, I was thinking it would be better to always align the column under the menu of the header regardless of the screens size due to resizing for smaller screens.

Is this possible using custom CSS or jquery script? I suppose it doesn’t matter what is in the said column, it could be an image/text etc. Currently, I have a custom headline along with a feature list and text. I just think it would look better if the column would always fall in the middle of the header menu regardless of screen size. I did a search but was unable to find and answer. Thanks in advance for the help.

Regards,
Chad

[thai]

Hello There,

Please provide us with your website URL so we can take a closer look?

Thanks.

[cxander]

Sure, the URL is http://www.soundinnovationdj.com/ and the column in question is located on the home page within the first row (ribbon style background image) under the header. It has the custom headline element, a feature list element, and a text element within it. Thanks for the help.

Regards,
Chad

[christian]

I recommend you apply the blue border to your section. Then, set the Row’s max-width to 1100px and add width of 88%. That is the same as your site layout width settings. After that, change your column’s left: 65% CSS to right: 0.

This would be the result: https://youtu.be/pSWpnRzX4fk

Hope that helps.

[cxander]

That looks great, but where/how do I add the blue border to the section? Also, I’m not clear on changing the max width to 1100px and then adding width of 88%. I understand how to change the max width, but I don’t understand adding the width of 88%. Thanks for the help.

Chad

[christian]

The Section has a border setting.

Regarding the Row, sorry for the confusion. Remove the max-width (looks like you added this as inline CSS?) and simply enable the Column Container. It is the same as applying the site’s max-width and width so it will follow the size of your header.

Thanks.

[cxander]

Thank you again for the help. I’ve made the changes except for adding width of 88% as I don’t understand that piece. It seems to be working without that, but I’d still like to know what you mean so I can apply it and see if there is a difference. Thank you for the help.

Chad

[friech]

Hi Chad,

The max-width:1100px; and width: 88%; that was suggested is to make your header container and your first section’s container to be the same width. But since turning on the Row’s Column Container option do the trick, you can simple disregard that.

On other note; I see you added a max-width: 1900px; on your section, please remove that it will cause an issue on big screens (https://prnt.sc/fqbqet).

Cheers!

[cxander]

I see what you mean. I have removed the max width as suggested. I have set max widths on most of the images on the whole website to match the image sizes, (mostly smaller images for mobile screen sizes and smaller laptops) so should I remove those set max widths too?

[christian]

If it works fine you can ignore it.

Thanks.