Adjust allignment specific for desktop?

  • Resolved luctoren123

    (@luctoren123)


    6 years, 8 months ago

    Hello, i have a problem i hope somebody can help me with. I have a wordpress site with the storefront theme. I’ve set up a child theme and i bought the powerpack upgrade to make easy style adjustment for the productpages.
    On https://topvakantiedeals.nl/product/zekerheidsdraad-voor-stuurhouder-cc-100/

    You can see that there is a description (=beschrijving in dutch) tab and on the right site there is a heading also named description/beschrijving with some product information text below.

    I figured out some CSS (with help of forum members, thanks!) to hide the tab on the left side of the page but the issue i came across is that the header and product info is not lined out properly on desktop. Things are lined out rignt for mobile and tablet.

    But when i made some changes to the padding etc. to show things right on desktop my views for mobile and tablet are affected and dont come out nicely. How can i handle this so the views for all devices are correct?

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

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

    (@jessepearson)

    Automattic Happiness Engineer

    @luctoren123 I believe you are referring to the alignment here:


    Link to image: https://cld.wthms.co/2bAnbL

    This can be fixed with this rule:

    @media (min-width: 768px) {
    .storefront-full-width-content .woocommerce-tabs .panel {
        width: 56.5217391304%;
    }
}

    Please keep in mind what I mentioned in the other thread about the tabs ??

    Thread Starter luctoren123

    (@luctoren123)

    Thanks Jesse! You da man ??
    You made my day!!

    I almost i’m afraid to ask but there is only 2 minor thing i would like the adjust if possible….

    1) Is is possible to remove the search glass icon on the right side of the productimage and also disable the zoom function when the productimage is clicked on?

    2) Is is possible to add an extra ”bekijk nu” button below the product description (beschrijving) ?

    jessepearson

    (@jessepearson)

    Automattic Happiness Engineer

    @luctoren123 The zoom can be removed as described here:
    https://www.remicorson.com/disable-woocommerce-3-zoom/

    This will hide the magnifying glass:

    .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	display: none;
}

    2) Is is possible to add an extra ”bekijk nu” button below the product description (beschrijving) ?

    Technically, yes, this is possible, but it would require editing templates and it’s more complex than we are able to assist with here.

    Thread Starter luctoren123

    (@luctoren123)

    Thanks Jesse once again. Worked out fine.
    Only thing i see now is that the image slightly moves when hovered over but that isn’t a big deal.

    Thread Starter luctoren123

    (@luctoren123)

    Hi, in first place i thougt everything worked out fine with the solution described here for disabeling the zoom function for the product image on the single product page:
    https://www.remicorson.com/disable-woocommerce-3-zoom/

    Later i noticed that it still wasn’t working correctly.

    I found this code and this does the job to enable the zoom funtion:

    /* Makes the featured single product image not clickable by changing the pointer. */
    .woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    pointer-events: none;
    }

    I wanted to post it here so maybe other people can benefit from it also!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Adjust allignment specific for desktop?’ is closed to new replies.