Ambiera ForumDiscussions, Help and Support. |
|
|
|||||
|
Hello everyone I have a problem with breakpoints and padding: I have a container with a padding of 40px on each side. I now want the padding to change to 20px when the window width is less than 900px. So I thought I would write the following under Custom breakpoint CSS: padding: 20px; But now the following happens: The padding on the left and top is now 60px (addition of 20px) and on the other sides the padding is reduced by 20px because the content is simply moved. When looking at the HTML code, I saw that the padding is created using “margin” and a div called for example "<div id="container_49e3fcfa_padding">". With padding: 20px, I am not overwriting the existing padding, but adding to it, because there is no padding: 40px and both paddings (padding: 20px and margin: 40px) are being used at the same time. What is the best way to solve this problem? Thanks and best regards, Peter |
||||
|
You are right - that's something that isn't that easy to solve. But you can do it with your own code addition: In RocketCake, click View -> HTML Code of Page -> Additional CSS styles and enter:
Then it should work (won't be visible in the editor, but when clicking on Preview though) |
||||
|
Hello Thank you very much. At first, it didn't work. I then looked into CSS code for other breakpoints and I think you forgot the hashtag. With hashtags, it's working!  @media only screen and (max-width: 900px) { container_49e3fcfa_padding { margin: 10px !important; } } |
||||
|
|
){kind=link}