Hi All - A tricky one. I want these images that I have uploaded in the product description sections to appear consistent when viewed on mobile. The First screenshot shows them jumbled and the second screenshot is how I want them to look. I believe I need to change something in the coding but am not sure what. Thanks for any help!
@AroonaSurf hi. open your theme code editor and look for core.css file or base.css file. Scroll to the bottom of the file and add this code.
@media(max-width:767px){
.product-section .wpb_wrapper .vc_figure{
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
I hope this does what you are looking for.
Hi Shadab, thanks for the quick response.
That doesn’t seem to have worked. I’ve attached a screenshot to make sure I’ve done it correctly:
Could It be to do with the product description HTML, as this is where the images are inserted?
Thanks
Nah I don’t think that would matter even though you have added html that is on the page so css should affect them
May be try adding !important to the code
Change the part to this
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
If this does not help, please try sending a clear picture of the html or i might need access to your store since I cannot check on my development store as you are using a paid plugin i believe
Hey Shadab, That doesn’t seemed to have worked either - the images are still jumbled.
This is the HTML for the 6 images below:
Thanks for the help.
@AroonaSurf sorry for all the fail tries but sometimes its just like that, if this was a free theme iwould have tried it on my development store. the code is correct, lets give it a shot and try adding this under base.css file all the way down after everything. also i see the mobile version is a bit off since your size chart goes out of the page it makes entire page scrollable which is not a very good practice in my opinion, so i have added the code here in between // size chart css, size chart css end*/. if you dont like it remove it.
@media(max-width:767px){
.product-section .wpb_wrapper .vc_figure{
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
}
// size chart css
.product-section table{
overflow-x: scroll;
height: 100%;
display: block;
width: 100% !important;
}
// size chart css end
}
Don’t apologise thanks for helping.
I can’t seem to find the base.css file in the theme code editor - can you direct me to it?
thanks
Pretty much the same way you found core.css so searching for it in the theme code editor. if you cannot find that try looking for main.css or style.css.
Honestly @AroonaSurf I know this is the code which will do it. But as I told you this is how it gets sometimes. If you don’t mind giving me a collaborator access to your store I would definitely look for the right place to put this.
Wouldn’t have asked if only you were on a free theme. Up to you to make this easier for the both of us or else I wouldn’t mind trying a bit more this way itself.
Thanks