How to Remove right hand blank space?

  • Resolved alexbjak

    (@alexbjak)


    1 year, 9 months ago

    On the product pages, I create there’s a large blank space on the right hand side of, like a blank column. I would prefer to delete this white space, so there is more space for my content.

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

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

  • Hey there,

    So you would need custom CSS for that – you could try: 

    @media screen and (min-width: 1025px) {
.entry-content, .entry-summary {
    float: left;
    width: 100%;
}
}

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
    float: left;
    width: 100%;
}

.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
    float: right;
    width: 100%;
    clear: none;
}

    This can be added via Appearance > Customize > Additional CSS.

    I hope this helps!

    Thread Starter alexbjak

    (@alexbjak)

    Thanks Adam! It works, but it works almost too well ??

    see here now: https://snipboard.io/Wlu5DM.jpg

    Is there a way to have it so the main photo is eg 60% of the width of the screen, and the whole section with price, varation selection and ADD TO BASKET button, still fits onto the right hand side? (see here: https://snipboard.io/xqvfjy.jpg)

    Hey there!

    Yes, so you could try:

    @media screen and (min-width: 1025px) {
.entry-content, .entry-summary {
    float: left;
    width: 100%;
}
}

.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
    width: 70%;
}

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
    float: left;
    width: 20%;
}

    70/20 seems to work best with the images in place there.

    I hope this helps!

    • This reply was modified 1 year, 9 months ago by Adam Leone.
    Thread Starter alexbjak

    (@alexbjak)

    Great! I swapped the two numbers, and now it looks amazing!

    One thing, is there something i can do so the product description underneath stays slimmer “within” the width of the product photo above
    https://snipboard.io/tBzNSo.jpg

    Thread Starter alexbjak

    (@alexbjak)

    And is there a similar code for removing the right side white space / column under the shop page?

    https://evigevig.com/shop/

    Hey there!

    It looks like we’re getting there!

    One thing, is there something i can do so the product description underneath stays slimmer “within” the width of the product photo above
    https://snipboard.io/tBzNSo.jpg

    Yes, this CSS should help. 

    div#tab-description {
    width: 70%;
}

    And is there a similar code for removing the right side white space / column under the shop page?

    So this code would help, although you may wish to reconsider, or tweak the 240px to help keep things symmetrical. 

    @media screen and (min-width: 1025px){
.site-content {
    margin-left: 360px;
    width: calc(100% - 240px);
}
}

    I hope this helps!

    Thread Starter alexbjak

    (@alexbjak)

    thank you so so much!!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to Remove right hand blank space?’ is closed to new replies.