Currently, I am in the process of developing a Wordpress page using WPBakery Page Builder. To enhance the design, I extracted some HTML/CSS code from an existing page by using SnappySnippet and pasted it into the new page within a "Pure html" block. However, I have encountered an issue where the content does not adjust properly on all screen sizes. It only works correctly on my computer when it is in fullscreen mode, appearing messy on other screens.
Below is the HTML code:
<div id="DIV_1">
...
</div>
And here is the CSS code:
#DIV_1 {
max-width:100%;
...
}/*#DIV_1*/
#DIV_2 {
...
}/*#DIV_2*/
...
#DIV_36 {
...
}/*#DIV_36*/
I have tried various solutions to fix this issue but without much success. If anyone has any insights or suggestions, I would greatly appreciate your help.
Here is how the content looks in fullscreen view:
https://i.sstatic.net/VVtjd.png
And this is how it appears when the browser window is resized to half screen: