Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #808952

    Hey team,

    I made a few changes to my WooCommerce product pages as suggested by an moderator in this forum. For example, take a look at: https://edley.de/produkt/digitales-marketing/

    I changed the product description box to full size using the following CSS Code in my Quick-CSS:

    /*Produktbeschreibung full width*/
    .single-product-summary {
    overflow: visible;
    }
    .template-shop div.product div.summary {
    width: 60%;
    float: left;
    }
    
    .single .woocommerce-tabs {
        position: relative;
        top: -75px;
    }
    
    /*Thumbnails Product Page in 1x6 anordnen*/
    #top .single-product-main-image .thumbnails a{
    width:15.3%!important;
    }
    

    It looks fine on the desktop version.
    However, the product pages look weird on mobile devices and in responsive mode. In the mobile version, the description is just displayed on one half of the page and the button ‘In den Warenkorb’ is not clickable anymore. Also, the different tabs (Beschreibung, Lernplan, Bewertungen) do look weird on devices that are smaller than an iPhone 6s Plus..
    Please take a look at the site on your mobile device or in responsive mode, you’ll see what I mean.
    Do you have any ideas on how to fix that?

    Thanks,

    Giaco

    • This topic was modified 7 years, 4 months ago by giaco_he.
    #809391

    Hey giaco_he,
    Try this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 767px) { 
    .template-shop div.product div.summary {width: 100%!important;}
    #top div.product .woocommerce-tabs {top: -10px!important;}
    }
    }

    Best regards,
    Mike

    #809407

    Seems to work now, thanks!

    #809418

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Mobile version does not respond right’ is closed to new replies.