Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 20, 2017 at 1:25 pm #736423
    M1000000

    Hi guys,

    Here’s what I’m struggling to achieve – basically a boxed layout but with a full browser width header:

    https://postimg.org/image/615wmedfd/

    I’ve tried using stretched layout and giving #main a max-width to control content width below it – no joy, seems I can’t set a max-width for this in child theme css, maybe it’s being overridden programatically.

    I’ve tried using stretched layout and giving .avia-section a max-width but the same result.

    I’ve tried using boxed layout and forcing #header_main to browser width using width: 100vw but again my child theme css is being ignored for some reason.

    I’m running out of options – can you please advise?

    Many thanks, M

    January 22, 2017 at 6:30 am #736887
    Rikard

    Hey M1000000,

    I’m not sure if that would be possible but send us a link to where you want to implement it and we’ll have a closer look.

    Best regards,
    Rikard

    January 22, 2017 at 6:47 pm #736991
    M1000000

    Hi Rikard,
    > I’m not sure if that would be possible
    Yes it seems to be a big one when it comes to maintaining the integrity of the rest of the layouts so I am looking for a workaround.
    Please close this and I will post a new topic as required.
    Many thanks, M

    January 22, 2017 at 7:11 pm #736996
    M1000000

    To share the workaround:

    My specific requirement was basically for a full width header with content on the homepage in a boxed layout. Rather than trying to achieve a full width header and boxed content I am using the stretched layout with the following child theme css restricting the width of the color sections on the homepage as follows:

    .home .avia-section {
	clear: both;
	float: none!important;
	width: inherit!important;
	max-width: 1310px!important;
	margin: 0 auto!important;
}
.home #main {
	background-color: #ddd;
}

    The second element is just applying a custom bd color to #main so that the page looks boxed (I don’t need features like bg images).
    This seems to work fine for me and would probably work sitewide – but I may have missed something so please let me know if you see any problems with it / have a better option.

    Thanks, M

    January 26, 2017 at 12:31 pm #738864
    Yigit

    Hi,

    Glad you figured it out and thanks for sharing your solution :)
    Let us know if you have any other questions or issues

    Best regards,
    Yigit

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘full width header with max-width limited content’ is closed to new replies.