Microthemer Responsiveness

This topic contains 5 replies, has 2 voices, and was last updated by  lexya 4 months, 2 weeks ago.

Author Posts

lexya

Hello,

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.

What can I try to make it work?

Thank you!


lexya

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?


Sebastian

Hey Lexya,

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.

Thanks,
Sebastian


lexya

https://200yearproject.com/zero-waste-laundry-detergent/

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.


Sebastian

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).

.elementor-element-4dd7313 .elementor-row {
   flex-wrap: nowrap; 
}

This will override the default flex-wrap: wrap setting Elementor sets for smaller screen sizes.

Let me know if you’re still stuck!

Cheers,
Sebastian


lexya

Yes that did it! Thank you so much!

You must login or register to reply to this topic.