I am having issues with making my website look good on mobile. I have 3 Shortcodes with images at the very top and as the screen becomes smaller I would like the images to become smaller and stay next to each other instead of spreading out underneath each other. I have tried adjusting everything and the only thing that has gotten them smaller is setting the max-width to 33% for instance. But they are still underneath each other instead of next to each other how they are with a bigger screen.
Ok I just figured that one out with the flex option! Now I tried to do the same thing with the author name and post date at the top, since I want it to be next to each other instead of underneath when the screen becomes smaller but that does not work…any tips?
Setting display to flex makes the direct child elements line up next to each other. And so I suspect that the author name and post date are not direct children of the element you set flex on. But in order to give you specific advice, I would need a link to the page you’re working on.
This is the page I am working on, when viewed in desktop the author and date are next to each other but the smaller the screen becomes they end up underneath. They are in a column together so I thought that would be the same element.
OK, try targeting the container element that has the class “elementor-row”, and then set flex-wrap to nowrap via the flexbox options. The full code for the selector is as follows (you can copy and paste this into the code editor area to the left of the Font property group).
