Docs

[Eric]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in! Please be advised that the columns will only collapse to the bottom when the browser width is less than 980 pixels. When the browser width is greater than 980 pixels, only the column width will change and also along with its height since the height of the columns depends heavily on the height of your contents when displayed on screen.

Hope this helps.

[Eric]

Hey thanks for the reply.

So are you saying it’s impossible to stop the image from jumping up and down without having it lift up whenever the browser is made smaller? Because right now it looks exactly how I’d like it to look on desktop, the only problem is the fact that it lifts up when the text from the tabs surpasses the image. I’m really open to any solutions because I’ve already spent way more time on it than I had planned and I really want to get it solved. I just measured the screen and it appears that the image starts to raise when the screen is at approximately 1172px. So would it be possible to have the inserted image being replaced by the background image whenever it gets past that point?

If you have any other suggestions please let me know.

And thank you again for all your help.

[Rad]

Hi there,

Yes, it’s impossible. Working with background or even with columns are contradictory since what you’re achieving is collapsing and expanding content. We all know that a moving content could affect its surrounding elements. If you fixed it in its positioning then there will be another set of issues that will appear.

The background image is good since it will not jump, but remember, background relies on content. And since content expands and collapses then it will be affected too. I recommend to consult it to a developer so he could do some trial and error development to see the best fitting solution for the requirement. There is another solution, and it’s making the image float but the downside is being responsive. All of the implementation has their own pros and cons when it comes to ever-changing content.

Thanks.

[Eric]

Okay thanks for the information, I understand now. I did some more research and people were saying that it’s possible to have a section to go into ‘mobile mode’ earlier by simply adding some CSS, which would drop the section’s right column down to the bottom.

Would you know if I could do that in my case? Because if I can drop the image down to the bottom when the screen is bellow 1140px then my issue will be completely solved.

Let me know and thanks again for all the great information!

[Rue Nel]

This reply has been marked as private.

[Eric]

Hey that’s exactly what I was looking for! I just need one last thing and then I’m done.

In the left column I have 96px of padding on the left with 0px on the right, which makes it look perfect on desktop. However whenever the browser goes below 1140px, or whenever it’s in mobile, the content becomes off-centered.

So would I be able to add some CSS that adds 96px of padding on the right side of the left column, which would be applicable whenever it falls below 1140px, or whenever it’s on mobile? If I can do that then it’ll be perfect.

Thanks again for all your help.

[Lely]

Hello Eric,

On the column with 96px left padding, add adjust-padding on it’s class field. Then update above CSS to this:

@media(max-width: 1140px){
  #the-cinema .x-column{
    display: block;
    float: none;
    width: 100%;
    margin-right: 0;
  }
  .adjust-padding{
      padding-left:0 !important;
  }
}

That CSS will reset 96px to zero when screen size is less than or equal to 1140px. !important at the end will make sure it will override the inline style in which in CSS precedence is in top.

Hope this helps.

[Eric]

Worked perfectly!

Thanks a lot for your help.

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts