Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • March 20, 2019 at 4:40 am #1080645
    ezvisa

    I want to display my blog post like this:

    Optimizing the Checkout Flow with WooCommerce

    It means the text block raises an override a part of an image, and have the same margin to left and right. I try this and have a result:

    Kinh nghiệm xin visa Pháp

    My method:
    1. I create a 1 block, which contains the text. And give it a specific class name “cangiuacollumn”.
    2. I give this class CSS:
    .cangiuacollumn {
    margin-left: 15% !important;
    margin-right: 15% !important;
    width: 70% !important;
    }
    The problem is: It see the same in desktop screen, but in mobile I want it to appear like the page of Woo, It means: It only has only small margin left and right, not the huge margin like my page.
    Can you help me?

    • This topic was modified 5 years, 8 months ago by ezvisa.
    March 23, 2019 at 9:11 am #1082086
    Vinay

    Hey NHAT TAN,

    Thank you for contacting us.

    reduce the left and right gaps in mobile please use the below CSS.

    @media only screen and (max-width: 767px) {
.responsive #top.single #wrap_all .container {
    width: 100% !important;
    max-width: 95% !important;
}}

    Best regards,
    Vinay

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.