Archived topic
CSS Help - With Elementor
3 replies · Started by David on October 6, 2018
I know this is not GP specific but I'm going crazy trying to figure this out. If the front page of the site is viewed on mobile and you turn the phone sideways, the blog post images stretch the entire length of the mobile device. This makes them huge, blurry... and well downright ugly. Is there a way to keep their size (width) the same as when viewed in portrait? Perhaps some CSS that might fix it?
I tried to get help from some Elementor communities to no avail.
Alas, if this is outside the scope of this forum that's cool - maybe a recommended tool that could help me fix it? Figured I'd at least ask.
Thanks kindly, you guys rock. :)
Hi there,
out of our scope, but you can give this a shot:
@media (max-width: 767px) and (min-width: 420px){
.elementor-grid-mobile-1 .elementor-grid {
grid-template-columns: repeat(2,1fr);
display: grid;
}
}Hi David. Thank you so much for replying and trying to help! You certainly didn't have to do that but it was very kind.
Unfortunately it didn't work. But just to update - I was able to accomplish what I wanted by duplicating the content and setting a custom box size. And hiding the larger on mobile and hiding the duplicate (where I changed the box size) on desktop and tablet.
Seems to get the job done.
Thanks again for the kind reply - have a wonderful day!
It was a shot in the dark - it actually works on responsive screen settings ( in my tests ) - probably needs a bit of tweaking using the device size and orientation queries. But glad to hear you found a working solution.
