Margins in woo shortcodes for product descriptions on mobile site

  • Resolved mychicwardrobe

    (@mychicwardrobe)


    3 years, 9 months ago

    I have added a new in page on my site which shows the most recent 20 products uploaded using a woo shortcode however the spacing around the product names on the page doesn’t look right on the mobile site.

    I have managed to adjust the space above the the product on the homepage using the below CSS but haven’t been able to work out how to do it for the ‘new in’ page. I would also like to reduce the margin under the price as well on both which i haven’t managed to work out.

    I don’t want it to affect the spacing on the archives pages which looks fine as it is and so i need it to target the specific pages.

    @media only screen and (max-width: 790px) {
    .page-id-12
    .woocommerce-container .product-title, .home .post-content h3 {
    margin-top: -25px;
    margin-left: -18px;
    margin-right: -18px;
    }
    }

    Thank you!

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Gabriel – a11n

    (@gabrielfuentes)

    Hi there! ??

    I would like to let you know that the spacing of your site is part of your theme’s design. You can confirm that by temporarily switching to Storefront Theme to see if that resolves the issue.

    If it does resolve the issue, please reach out to your theme’s developers for a solution.

    Hope that helps! ??

    Thread Starter mychicwardrobe

    (@mychicwardrobe)

    The spacing of the site is fine except for when i use woo shortcodes to display my most recent products on the homepage and the ‘new-in’ page. The default seems to be much larger padding around the product name than is being used for the rest of the site so it will need to be done with CSS similar to the one i used previously.

    Hello @mychicwardrobe ,

    Have you been able to get your desired result?

    I can see that you have some custom CSS added to the element that is adding 18px of padding around the product tile and price. Due to the caching plugin, I can not be sure from where this CSS is coming from, however, if you want to modify your current CSS on this page then use this –

    .page-id-122 #wrapper .fusion_mobile_layout .woocommerce .product-details {
    padding: 0 !important;
}

    It is recommended to avoid using “!important” if possible. As you have already used it for this class, we again need to use this to override the previous one.

    I hope this clears the confusion.

    Thank you ??

    Thread Starter mychicwardrobe

    (@mychicwardrobe)

    worked perfectly thank you so much!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Margins in woo shortcodes for product descriptions on mobile site’ is closed to new replies.

Tags