Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

CSS CSS issue I can't solve

Lucas

New Coder
Hi,

I'm having a CSS issue that exceeds my knowlegde. Hope someone can help. :)
On my website Rentalworks, when you book a product and click next, and you go to a smaller screen mode you see the blocks overlay instead of stacking.
I tried many things. Flex,... can't seem to solve this.

Any suggestions?

problem.gif,
 
Just played with this for a few minutes, but already found a couple of potential issues:

You have a CSS rule for "#roja45_rental_product .summary-right-column" that has a "float: right" on it, which you should disable at the smaller screen size.

You also have some Javascript on that page that appears to be manipulating the styles and adding inline styles to things. I saw something I've never seen before looking at your site, you have an element that has one set of classes but the classes change when I go to inspect it just inspecting it changes the classes.

I would suggest you go through element by element at the small screen size and find any elements that have either a fixed position, flex, or float and disable that as it looks like there's a lot of that going on. Also, if you're using Javascript to resize the layout (which you likely shouldn't be) you'll want to make sure it only does this at desktop, as on mobile the best approach is just to let everything stack.

In JS, you can use Window.matchMedia to selectively execute Javascript based on a media query size: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
 
Just played with this for a few minutes, but already found a couple of potential issues:

You have a CSS rule for "#roja45_rental_product .summary-right-column" that has a "float: right" on it, which you should disable at the smaller screen size.

You also have some Javascript on that page that appears to be manipulating the styles and adding inline styles to things. I saw something I've never seen before looking at your site, you have an element that has one set of classes but the classes change when I go to inspect it just inspecting it changes the classes.

I would suggest you go through element by element at the small screen size and find any elements that have either a fixed position, flex, or float and disable that as it looks like there's a lot of that going on. Also, if you're using Javascript to resize the layout (which you likely shouldn't be) you'll want to make sure it only does this at desktop, as on mobile the best approach is just to let everything stack.

In JS, you can use Window.matchMedia to selectively execute Javascript based on a media query size: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
Hi!
Thanks for your reply.
I tried as you discribed but can't seem to find the issue.
I'm not familiar with JS, but I'll try looking into it. Otherwise I think I'll have to hire a freelancer.
I'm not giving up yet :)

Greetings
 
As @Tealk, I would suggest adding a breakpoint when it reaches tablet size to have elements be displayed as blocks then make their width 100%. This would push different containers to have their own line.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom