Force Main Containers To True Fullwidth / Screen Edges

  • Resolved Reviews

    (@ducc)


    7 years, 6 months ago

    Hello, we are trying to duplicate what we had on a previous theme prior to switching over to yours. We are basically just trying to force all content wider than the standard fullwidth (i.e., to the edges of the screen instead), without the Box Look. If we could do this on all pages, that would be great, but if not, at least on the all WooCommerce pages (e.g., Shop, Single Product). So as mentioned, ideally extending all content responsively to the edges of the screen regardless of Device.

    Thank you in advance,

    DUCC

    Similar to this (OLD) CSS below:

    (FOR EVERYONE ELSE, PLEASE NOTE, THIS IS ((NOT)) FOR THE VIRTUE THEME)

    /***Extend shops width on home and shop archives***/
    @media only screen and (min-width: 1200px){
    .mpcth-responsive #mpcth_main_container {
    width: 100%;
    }
    }

    • This topic was modified 7 years, 6 months ago by Reviews.
    • This topic was modified 7 years, 6 months ago by Reviews.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • I’m currently seeing the content stretch from edge to edge on my computer.

    Were you able to find a solution? If not, can you share some screenshots of your previous site so that I can be sure I’m understanding your intentions?

    Thanks,
    Kevin

    Thread Starter Reviews

    (@ducc)

    Hello, and thanks for your quick response.

    Yes, on the HomePage DUCC.com at first it would seem so, but we’re only able to accomplish what you’re seeing because we’re using a PageBuilder; it would be nice not to have to do it that way. However, it’s actually the Shop/Archive and Single pages which are of the most concern. We currently don’t have a way to override the Fullwidth/Box style on those pages. And sorry, the shop page is actually at: /content not /shop.

    We don’t have our previous theme up, we proudly have yours up, but you can easily see it when you go to the content page, or please just choose to view any of the products and the problem will be prevalent on the single product pages too.

    You help is very appreciated.

    Thank you,

    DUCC

    I don’t think that this is optimal for responsiveness, but try this CSS:

    div#content {
    width: 100%;
}

    The issue here is that on a large desktop monitor, your content width will be HUGE. But if you’re after that look, then this should work for you.

    -Kevin

    Thread Starter Reviews

    (@ducc)

    Your help once again was brilliantly effective. Thank you.

    And yes, that’s understandable; we’ll decrease it a little in hopes we find a reasonable width such as 70% or so, but even then you’re right. We’ll test it out some and revert back if need be.

    Thank you once again Mr. Kevin.

    DUCC

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Force Main Containers To True Fullwidth / Screen Edges’ is closed to new replies.