Featured Products Distorted on Mobile device

  • Resolved bnstaley

    (@bnstaley)


    2 years, 12 months ago

    Hello,
    I am newer to building websites but and learning quite quickly! I am lost however on this issue. I have searched the internet to no avail, my site looks good on pc but when I visit it on mobile the featured products are very tall and skinny and look terrible. I made it look good for like a second but I dunno how I did it. I was messing around with the settings of the block and it worked and then went right back like an hour later when I tried to show the site to someone lol.

    Here is a picture of what they look like when viewed in mobile.
    https://drive.google.com/file/d/1RtxXl2z8edR_-8XeykTPyvFAKB6VWhcG/view?usp=sharing
    Thank you in advance for any help you can offer.
    Brittany

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

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

  • Hi @bnstaley!

    Thanks for choosing Neve!

    Please insert the code below in the Additional CSS section within the Customizer. It will make the images form the featured products section to be properly displayed on mobile devices too.

    @media(max-width: 1200px){
.home .elementor-widget-obfx-posts-grid .obfx-grid-wrapper {
    width: auto !important;
}
}

    Have a nice day!

    Thread Starter bnstaley

    (@bnstaley)

    Hello,
    Thank you so much for responding @luciamarinescu ! When I go to do that, it says that I need elementor pro to add customer CSS? Is that the right spot and I need pro or am I in the wrong section?
    I click on the box that contains the featured product images and then went to advanced on the top and scrolled down to custom CSS…

    Thank you again in advance for helping me!
    Brittany

    @bnstaley The code has to be added in Customizer -> Additional CSS. You can open the Customizer from the dashboard, by going to Appearance -> Customize from the left sidebar or from any page of the site by clicking on the “Customize” button that appears in the top bar, as you can see here. Then, scroll down the left sidebar and click on “Additional CSS”, as you can see here. You should add the CSS code there and then publish the page, so the changes will be saved.

    Let me know if you need further guidance!

    Thread Starter bnstaley

    (@bnstaley)

    @luciamarinescu It did not work:(
    Brittany

    Hello @bnstaley!

    I checked your site and for me the featured products are properly displayed now – screenshot. If you still see all the products displayed on one row, please clear the cache (browser and plugin, if you use any caching plugin) and check the site again.

    Have a nice day!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Featured Products Distorted on Mobile device’ is closed to new replies.