Home Forums Community Forum How to override mobile padding on 100% site width?

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • mikechops
    Participant
    Post count: 3

    I have a blog that uses a sidebar, I would like to make a post occasionally without a sidebar and utilize 100% site width (but maintain normal content width). I tried setting the padding left/right padding to maintain the same content width (which looks fine on desktop) but in mobile it squishes the content making it stack. When I try to use containers/columns instead of padding, my comments and social box are still stretched.

    What I’m aiming for:

    |normal blog width content|
    --100% width image container--
    |normal blog width content|
    |normal width comments and social|

    Above example that still looks readable in mobile.

    Thanks!

    mikechops
    Participant
    Post count: 3

    Just an update after more testing, I found a fix. Please let me know if there’s a batter way, or is this ideal?

    Add custom css, this resizes the non fusion builder elements to the post. (note: you must use fusion elements for your post.)

    .single .fusion-sharing-box{
        max-width: (site width);
        margin-left:auto;
        margin-right:auto;
    }
    
    .single-related-posts{
        max-width: (site width);
        margin-left:auto;
        margin-right:auto;
    }
    
    .single .comments-container{
        max-width: (site width);
        margin-left:auto;
        margin-right:auto;
    }
    
    #respond{
        max-width: (site width);
        margin-left:auto;
        margin-right:auto; 
Viewing 2 posts - 1 through 2 (of 2 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.