Hello,
I am testing out the tabs on a page due to other tab issues. On the bottom of my page — the tab section – looks great on desktop, but in a vertical position on a mobile device, the image is in between the bullet points.
Also, i am noticing with both Tab sections — the image does not look aligned properly on mobile.
Hey Shiv722,
Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 767px) {
.toggle_content img {
min-width:100% !important;
}
}
Best regards,
Rikard
Hi Rikard,
I have inputted that code and still does not work properly on a mobile device. The last section on that page is the TABS and on mobile device, each picture is after the first bullet point. I would like this to be above the bullet points on a phone when held vertically.
Hi Shiv722,
I am seeing all images above text. Here is the code for slight adjustment for images on tablet and some padding below image on mobile:
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.toggle_content img.size-portfolio {
width: 40%;
}
}
@media only screen and (max-width: 767px) {
.toggle_content img {
min-width: 100% !important;
margin-bottom: 20px; ---- add this line to the code Rikard gave you.
}
}
Best regards,
Victoria