Need help with CSS in column layout

  • Resolved pgdev

    (@pgdev)


    2 years ago

    Hello Everyone, I need little help in making this Image background stick to the left and responsive even when zoomed in or zoomed out. Right now, I applied CSS changes as below: 

    #event-section .event-bg1 {
    margin-left: -50px;
}

    But sticks to left upto 80% zoomed in, beyond that it doesn’t. I need that img to cover full left. Right now it looks like this:
    Click here to view

    Any idea how to achieve this, Please help.. Thanks

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Difa

    (@difawa)

    2 years ago

    In your CSS:

    .responsive .container{max-width: 1450px}

    If the container width exceeds 1450px, empty space will appear on the left and right. Change the CSS code to the following.

    .responsive .container{max-width: 100%}

    https://ibb.co.com/jJfrjqM

    Thread Starter pgdev

    (@pgdev)

    2 years ago

    It workssss. Thanks very much!! Any idea on how to apply this css change for one specific page? Currently it applies for all pages.

    Difa

    (@difawa)

    2 years ago

    You can add html block in such page editor.

    <style>
.responsive .container{max-width: 100%}
</style>
    Moderator bcworkz

    (@bcworkz)

    2 years ago

    Or use a unique body class selector:
    .page-id-9941 .responsive .container{max-width: 1450px}

    • This reply was modified 2 years ago by bcworkz. Reason: missing dot
    Thread Starter pgdev

    (@pgdev)

    2 years ago

    Yes @bcworkz, unique body class selector worked out. Thanks!

    Moderator bcworkz

    (@bcworkz)

    2 years ago

    You’re welcome! I neglected to include the . dot class signifier with that, but if the added class is working for you, you obviously fixed it yourself.

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

The topic ‘Need help with CSS in column layout’ is closed to new replies.