Container width issues for sidebar element

  • Resolved solsalute

    (@solsalute)


    4 years, 12 months ago

    I’ve created a sidebar via a block element and it works great, now I’m just trying to style it by adding a background color behind my photo and introduction, I did so with a container and set the width to 300px (width of my sidebar). All looks great except the photo and text now bleed off the right. What am I doing wrong that is keeping the background of the container smaller than the photo/headline blocks inside it? I’ve tried no constraining the width of the container but same thing still happens.

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Elvin

    (@ejcabquina)

    4 years, 12 months ago

    Hi there,

    It’s because your containers have conflicting min-width and max-width.

    Your outside container was set to max-width of 300px while your inside container was set to min-width:380px. The min-width causes the overflow because 380px is greater than 300px.

    I suggest not adding these values and let the containers flow naturally.

    Thread Starter solsalute

    (@solsalute)

    4 years, 12 months ago

    I don’t see 380 pixels anywhere, I have it all set at 300 where I can see.
    I removed the constrained widths on everything to test it and it kept overflowing anyway.
    Now I have it set at 300 for both containers.

    Plugin Author Tom

    (@edge22)

    4 years, 12 months ago

    Hi there,

    I’m seeing this custom CSS added:

    @media only screen and (min-width: 1105px) {
    .right-sidebar .sidebar, .right-sidebar .sidebar .gb-inside-container {
        min-width: 380px;
    }
}

    It could be in “Customize > Additional CSS”, maybe?

    That’s what’s causing the overflow.

    Let us know 🙂

    Thread Starter solsalute

    (@solsalute)

    4 years, 12 months ago

    Ok thanks!! Mediavine added that to make the sidebar wide enough for ads, I forgot.
    But I can’t manage to make the overflow stop, I realize this is a simple simple solution but for some reason I am failing at the simple math. I made both containers full width to avoid any conflicting values but am leaving the CSS as is to not mess with their ad fix…what am I doing wrong?

    Plugin Author Tom

    (@edge22)

    4 years, 11 months ago

    What happens if you remove the 40px of padding from the outer GenerateBlocks Container in the sidebar?

    Thread Starter solsalute

    (@solsalute)

    4 years, 11 months ago

    THANKS!!! That was it!!

    Plugin Author Tom

    (@edge22)

    4 years, 11 months ago

    No problem!

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

The topic ‘Container width issues for sidebar element’ is closed to new replies.