Mobile version does not respond right

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.