Image layout consistency on mobile in the product page description

[AroonaSurf]

  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!

[Shadab_dev]

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

[AroonaSurf]

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

[Shadab_dev]

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 

[AroonaSurf]

Hey Shadab, That doesn't seemed to have worked either - the images are still jumbled.

This is the HTML for the 6 images below:

<div class="feature-container"><a title="" href="https://www.nspsurfboards.com/our-dealers/" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-modern vc_btn3-block vc_btn3-color-grey" target="_blank"></a><img alt="" src="https://cdn.shopify.com/s/files/1/0764/7504/0060/files/1600x1600_Butter_Knife_8_6_White_-_HDT_-_Deta..." width="150" height="150"><img alt="" src="https://cdn.shopify.com/s/files/1/0764/7504/0060/files/1600x1600_Butter_Knife_8_6_White_-_HDT_-_Deta..." width="150" height="150"><img alt="" src="https://cdn.shopify.com/s/files/1/0764/7504/0060/files/1600x1600_Butter_Knife_8_6_White_-_HDT_-_Deta..." width="150" height="150"><br></div>
<div class="feature-container"><img alt="" src="https://cdn.shopify.com/s/files/1/0764/7504/0060/files/1600x1600_Butter_Knife_Mint_-_HDT_-_Detail_Fi..." width="150" height="150"><img alt="" src="https://cdn.shopify.com/s/files/1/0764/7504/0060/files/1600x1600_Butter_Knife_Mint_-_HDT_-_Detail_De..." width="150" height="150"><img alt="" src="https://cdn.shopify.com/s/files/1/0764/7504/0060/files/1600x1600_Butter_Knife_Mint_-_HDT_-_Detail_Da..." width="150" height="150"></div>

Thanks for the help.

[Shadab_dev]

@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

}

[AroonaSurf]

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

[Shadab_dev]

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. 

[AroonaSurf]

None of those files are showing up (base, main or style): 

Could it be main navigation css? Thanks

[Shadab_dev]

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