Support/Polestar Theme/Half screen behaviour for woocommerce product page on mobile

[Resolved] Half screen behaviour for woocommerce product page on mobile

  • Author
    Posts
  • February 1, 2018 at 4:41 am #8674

    Remo
    Participant

    Hello
    First of all thanks for such a great theme. I’m using it and I love it.
    But I think theme is not responsive for woocommerce product pages. Dekatop is ok, but when it comes to mobile phone, product image, gallery and short description sections are using half of the screen and they ate stucked. How can I fix this, with css? What will the code be like?

    This is my product page. (by the way you can put this site to your references ?)

    Match Tonix – Dark Wolf (VST, Windows)

    Best regards…

    February 1, 2018 at 10:55 am #8676

    Andrew Misplon
    Keymaster

    Hi Remo

    Thanks for your support, great to hear from you 🙂

    In your Custom CSS you have:

    .woocommerce .product .product-info-wrapper, .woocommerce .product .summary {
    width: 58%;
}

.woocommerce .product .images {
    width: 38%;
}

    Please, try wrapping those rules in a media query like this:

    @media (min-width: 769px) {

	.woocommerce .product .product-info-wrapper, .woocommerce .product .summary {
		width: 58%;
	}

	.woocommerce .product .images {
		width: 38%;
	}
}

    Let me know how that goes.

    February 1, 2018 at 11:24 am #8677

    Remo
    Participant

    Thamk you Andrew dor your support. When I applied the cose from custom css, nothing has changed.
    Naturally, shouldn’t we enter higher values tjan 58% and 38% to make content bigger? But when I try this too, it didn’t work.

    February 1, 2018 at 11:28 am #8681

    Andrew Misplon
    Keymaster

    Hi, the issue is that the rules added are being applied to mobile too which is the elements aren’t using the full screen size.

    I can’t see any change in your custom css on the live site. Is the change still in place? Do you have any caching in place?

    February 1, 2018 at 11:52 am #8683

    Remo
    Participant

    Hi,
    I’ve updated css code again. there should be new modified code.

    February 1, 2018 at 1:30 pm #8684

    Andrew Misplon
    Keymaster

    Thanks. Sorry for not be clearer. Please, replace the original rules with my rules wrapped in the media query. At the moment, my new rules have been added to the end of your Custom CSS but they are being overridden by the first rules at the start of your Custom CSS. Put another way, remove these rules:

    .woocommerce .product .product-info-wrapper, .woocommerce .product .summary {
    width: 58%;
}

.woocommerce .product .images {
    width: 38%;
}

    and replace them with:

    @media (min-width: 769px) {

	.woocommerce .product .product-info-wrapper, .woocommerce .product .summary {
		width: 58%;
	}

	.woocommerce .product .images {
		width: 38%;
	}
}
    February 1, 2018 at 1:51 pm #8685

    Remo
    Participant

    Thank you so much Andrew, yes it solved the problem.

    February 1, 2018 at 2:07 pm #8686

    Andrew Misplon
    Keymaster

    Super, glad to hear that helped. All the best.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Scroll to top