increase catalog picture size and reduce side margins for mobile site only

  • Resolved mychicwardrobe

    (@mychicwardrobe)


    3 years, 11 months ago

    I would like to increase the catalogue picture sizes for mobiles and reduce the padding on the left and right side of the page. If possible also reduce the font size of the names of the product. These changes are only for the mobile site, they’re fine on the desktop version. Is there an option within the global theme options for this or does it have to be done via CSS.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello @mychicwardrobe ,

    First of all, the changes you want to have can be achieved with CSS. Also, you can contact your theme developer to know if they have built-in options in the theme settings to manage these.

    I would like to point out that the catalog image size is depending on the overall catalog size. At the moment in mobile view, it is showing 2 columns which I think suits properly. If you want to show only one product instead you can use this CSS –

    @media only screen and (max-width: 600px) {
  #main .woocommerce-container ul.products .product, 
  #main .woocommerce ul.products .product {
    width: 100% !important;
    text-align: center;
  }
}

    To, reduce the font-size of the product name you can use this CSS –

    @media only screen and (max-width: 600px) {
  .woocommerce-container .product-title, .home .post-content h3 {
    font-size: 14px !important;
  }
}

    You need to save these CSS under your wp-admin > Appearance > Customize > Additional CSS field.

    This part of your site is mostly generated by your theme so you can go ahead and contact them to get a better understanding of their template structure and suggestions regarding changes.

    Thank you ??

    Hi there,

    We’ve not heard back from you in a while, so I’m marking this thread as resolved.

    Hopefully, you were able to find a solution to your problem! If you have further questions, please feel free to open a new topic.

    Thank you ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘increase catalog picture size and reduce side margins for mobile site only’ is closed to new replies.