wrap text around product page

  • Resolved firstfestivefooties

    (@firstfestivefooties)


    2 years, 2 months ago

    I’m trying to find a way to wrap the product description around the images on my woocommerce product pages. On the mobile version of my site, the words are squished to one side and isn’t user friendly in my opinion. I’d like the text to run the width of the screen after the product image. (I should add, I’m very much a newbie in terms of coding, so if I need to add that, please dumb it down with specifics for me, like where to add the code, etc.) I’m using the Neve theme. Thanks in advance

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

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

  • Hi @firstfestivefooties,

    Actually, what you’re looking for is desired behavior and those styles come from WooCommerce not Neve theme but I checked your website and for some reason those styles from WooCommerce are missing that should change the layout for mobile.

    You can add this CSS to Appearance->Customize->Additional CSS section:

    @media only screen and (max-width: 768px) {
    .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.images, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary {
    width: 100%
    }
    }

    It should make the mobile layout as you desire ??

    Thread Starter firstfestivefooties

    (@firstfestivefooties)

    @bvytis I tried that and I didn’t see a difference (the wording still continues squished to the right-hand side as if the pictures are in one column and the words are in a 2nd column).

    @firstfestivefooties,

    It doesn’t look that you added the mentioned CSS, here is the proof the it fixes the issue when added on your website:
    https://vertis.d.pr/v/cqZKv3

    Maybe you have some syntax errors in the additional CSS section of Customizer that makes all the code added there invalid so you can check for that.

    Thread Starter firstfestivefooties

    (@firstfestivefooties)

    @bvytis the syntax errors would make sense, because I did copy and paste the above provided code.

    I’m not super familiar with coding (as you may have surmised), so what kind of things would I look for to find the syntax error?

    @firstfestivefooties,

    Can you share screenshot(s) of the full view how your Additional CSS section looks?

    Thread Starter firstfestivefooties

    (@firstfestivefooties)

    I’m not sure how to upload a picture here, but this is the coding:

    /* Link colors / .link-white a { color: #ffffff; text-decoration: none !important; } .link-black a { text-decoration: none !important; } / Responsiveness */
    @media screen and (max-width: 600px) {
    .contact-form {
    width: 100%;
    }
    }
    .archive.post-type-archive .shop-container .products.columns-4 {
    display: none !important;
    }
    .archive.post-type-archive .nv-woo-filters {
    display: none !important;
    }
    body {
    -webkit-animation-duration: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0.1s;
    }

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to { opacity: 1; }
    }
    @media only screen and (max-width: 768px) {
    .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.images, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary {
    width: 100%
    }
    }

    Hi @firstfestivefooties,

    The CSS looks good, there are no syntax errors, but it doesn’t look applied.

    This is the place on your page where all the above CSS should be injected: https://vertis.d.pr/i/LD6HPO
    And it’s empty so not only the CSS I provided doesn’t work but nothing what you have there is added to the page.

    Maybe you have some caching plugin/functionality that could be causing it, try to clear it and check if it helps.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘wrap text around product page’ is closed to new replies.