Optimize for mobile

Hi @crhodes9898,

The image size adjustment feature is missing for different devices. We have noted it down for future development. For immediate fix, you can use the below CSS code via Appearance > Customize > Additional CSS.

/** for tablet devices **/
@media (max-width:1024px){ .affx-single-product-wrapper .affx-sp-img-wrapper img{ max-width: 250px !important; } }

/** for mobile devices **/
@media (max-width:767px){
.affx-single-product-wrapper .affx-sp-img-wrapper img{
max-width: 180px !important;
padding: 20px 0;
}
}

You can adjust the width value. Let us know if you still face any issues.

Hi,

Thanks for the help with that. How can I do this for the product table also, I want to reduce the image size for both mobile and desktop. Some of the images are very large.

Thanks,

• This reply was modified 1 year, 10 months ago by crhodes9898.

Hi @crhodes9898,

Sure we can provide the necessary CSS code. Please share the link to the post/page where you have used the product table.

You can also reach out to our support team directly for any help related to CSS through our website. Our senior developer can directly respond to your queries and provide necessary CSS.

Once you provide the link, we will provide the necessary code here.

Thank you.

Hi,

the link is https://lookleisure.com/snow/

thank you,

Hi @crhodes9898,

Thank you for the link. You can add the below CSS code:

.affx-pdt-table-single .affx-pdt-img-wrapper img{
max-width: 150px !important;
padding: 20px 0;
}
.affx-pdt-table-single .affx-pdt-img-wrapper{
text-align: center;
}

You can adjust the max-width value to suit your preference. Let us know if you face any issues or have further questions.

Hi,
Thank you very much that. One last thing, is it possible to adjust how large the rows are? I want to maybe make the table more compact vertically, or just more compact as a whole?

Thank you,

Hi @crhodes9898,

Yes, it can be done with some CSS code. Please explain your requirements with details so that we can provide the necessary CSS code.

Thank you.

Hi, I wanted to just make the rows themselves have less white space, so the lines are a bit closer. But I would also need to adjust the pictures to be proportional with that. I believe I can do that with the code you provided previously.

thank you,

Hi @crhodes9898,

You can try out some CSS code and let us know if you need any help.

Thank you.

Hi, I would just need help finding the correct classes to use for the rows in the table.

Thanks,

Hi @crhodes9898,

You can right click in your browser and go to Inspect to find the relevant selectors to use the CSS. Here’s the screenshot – https://prnt.sc/Lw0AZ6vhPm6F

We hope this helps. Let us know if you face any issues.