Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 18, 2016 at 10:07 pm #674367
    BirgitteAlstrom

    I would like to have the “Logo and Main Menu Area” in fullwidth, but right now it is in the same width as the maximum container width.
    I have the following settings in Enfold:
    – Stretched layout
    – Logo and main menu: top header
    – Responsive site
    – Maximum Container Width: 1130px
    Is there anything I can do?

    August 18, 2016 at 11:40 pm #674414
    Andy

    Hey BirgitteAlstrom,

    you could use this code inside Quick CSS field:

    .inner-container {
width: 119%;
left: -10%;
}

    and adjust as needed.

    Best regards,
    Andy

    August 22, 2016 at 1:18 pm #675695
    BirgitteAlstrom

    Thanks, Andy. It looks fine on web and iPhone, but on iPad the logo and main menu area gets too wide, so part of the logo on the left side and part of the main menu on the right side disappears.

    August 22, 2016 at 1:23 pm #675701
    Yigit

    Hey!

    Please use following code instead

    .container.av-logo-container {
    max-width: 100%;
    padding: 0;
}

    Regards,
    Yigit

    August 22, 2016 at 2:04 pm #675734
    BirgitteAlstrom

    Thanks, Yigit. For some reason it did not make it very much wider on web than originally. I had expected it to be more fullwidth on web, but still not entirely touching each side.

    On iPad it is now entirely fullwidth, so on iPad some space is needed on each side.

    August 22, 2016 at 3:07 pm #675791
    Andy

    Hi,

    well, you would need to adjust the code as needed, especially for different screen sizes, where you need to add media queries.

    However, I checked your website on iPad and it looks good to me. Can you provide us screenshot showing the issue?

    Best regards,
    Andy

    August 22, 2016 at 3:26 pm #675808
    BirgitteAlstrom

    It’s because I deleted the Quick CSS code again, because it did not look good. Please find enclosed a screenshot.

    August 22, 2016 at 7:01 pm #675952
    Andy

    Hi,

    use this code:

    .container.av-logo-container {
width: 1398px;
max-wdith: 1398px;
}

    and for iPad:

    @media only screen and (min-width: 768px) and (max-width: 1024px) {
.container.av-logo-container {
width: 1056px;
}}

    Adjust it as needed.

    Best regards,
    Andy

    August 22, 2016 at 10:04 pm #676053
    BirgitteAlstrom

    Thanks, Andy, for giving it an extra try. It did not turn out as I wished. It did not change the width of the logo and main menu area. Instead the mobile menu disappeared in portrait format on the iPad. I will leave it for now and might get back to the issue at a later stage.

    August 23, 2016 at 12:14 pm #676336
    Andy

    Hi,

    of course for portrait mode you need different media queries. Check this page for more information about media queries: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Best regards,
    Andy

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.