- This topic has 9 replies, 3 voices, and was last updated 3 years ago by
.
-
Posts
-
Hi im having an issue centring an image on mobile via css. The only thing thats worked so far i dont believe to be an actual solution is left: 20%;
I have tried displaying as everything possible, with justified content text align etc nothing seems to work.
The images on mobile are also not behaving as i would like, id like them to be 250x250px centered and for them to be responsive to different devices without the need for as much CSS.
Ill try show you the related css save you digging.
Issue is MOBILE VIEW -> Directory (Its how the listings are displayed)
Another very annoying related issue on the same page and view is the “Lakedistrict lobster” Listings name takes two lines, which throws the margins and padding off for the “Category” Is there a way to make it recognise the title is bigger and move its self abit? (Again mobile view only)
Current CSS:
For Image:
@media (max-width: 730px){
.lsd-list-view-wrapper.lsd-style-style3 .lsd-list-view-listings-wrapper .lsd-listing>div.lsd-listing-image>a.lsd-cover-img-wrapper img{
left: 20%;
max-width: 60vw !important;
}
}For Text/Info:
@media (max-width: 568px)
.lsd-list-view-wrapper.lsd-style-style3 .lsd-list-view-listings-wrapper .lsd-listing>div.lsd-listing-body {
flex: 0.9;
padding: 10px 10px 0px 10px;
min-height: 0px;
margin-bottom: auto;
text-align: center;
}For Container:
@media (max-width: 730px){
.lsd-list-view-wrapper.lsd-style-style3 .lsd-list-view-listings-wrapper .lsd-listing {
display: block;
border: 1px #eeeeee solid;
background-color: #ffffff;
margin-bottom: 30px;
position: relative;
box-shadow: 0 0 4px;
max-height: 460px;
}
}im wondering if there is a way to control all images related to any listing display type and make it a set size and to be responsive to kill all this headache?
Honestly not sure best way to attack this and would really appreciate some guidance. Would open two topics but my heads battered enough and they are very similar issues caused by possibly the same problem on the same page.
Thank you
Customer Support
Hi Chris,
Let’s tackle the alignment first.
Remove the left CSS you have.
Add this instead:
@media (max-width: 768px){ .lsd-list-view-wrapper.lsd-style-style3 .lsd-list-view-listings-wrapper .lsd-listing>div.lsd-listing-image>a.lsd-cover-img-wrapper { display:flex; justify-content:center; } }Take note though that since these elements are from a different plugin, support for them and how they function and look would be out of our scope.
Hi i have tweaked abit since sending this, looks better but i would like to know how to move the image so its overlapping the container, half and half so it gives it more of an effect rather than the container ending straight above the image? Thank you
Customer Support
Hi there,
could you remove that related CSS? As the plugin itself is using a very particular framework style, and i may be able to unpick how it wants to be worked with,
Hi David all css is removed, hopefully its easier that way, im must ask is there spesific tools that could help me also understand? By no means am i your level, but i do know a little bit here and there and like to be able to sort things myself if can do.
Kind regards,
Hi David, found solution
.lsd-list-view-wrapper.lsd-style-style3 .lsd-list-view-listings-wrapper .lsd-listing>div.lsd-listing-image{
margin-top: -60px;
}Bet its not the most efficient way but it does work, with some other targeted styling think it looks ok. touch wood.
If you narrow your browser width to around that of a portrait tablet, your current CSS is causing the section to overlay the image….
Ah i see, thank you!
Seem to have sorted it with using the right margin rather than left.
Any way in customiser to make mobile view be displayed earlier than normal, for that rough size or tablet size still?
Again probably not fixed it correctly but it stops the overlap. Feel free to laugh at me haha!
Please do advise if can would be massively apreachiated.
Just clocked using right padding pushes the review count right over, this plugin is abit of a nightmare to work around to be honest
Hi Chris,
You’ll need custom CSS to change the breakpoint of these third-party elements.
On what view is it pushing over?
Have you tried reaching out to this plugin’s support for a fix regarding this?
- You must be logged in to reply to this topic.
