Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 29, 2024 at 5:24 pm #1465686
    advone

    Hello everyone,

    We use the Enfold theme for a small WooCommerce store (approx. 30 articles) in a multisite environment.

    We have 2 problems in the mobile view…

    1. store page
    the store content is not centered, but has a larger empty space on the left than on the right. This looks very unattractive and looks like a mistake.
    We use the standard store page.

    2. product page
    On some product pages, the article description and also the image on the right shifts outside the screen, like a kind of overflow.
    If you scroll here, the product image gets bigger and bigger and the page can no longer be used.

    Thanks for your help.

    August 30, 2024 at 11:32 am #1465756
    Ismael

    Hey Martin,

    Thank you for the inquiry.

    1.) Did you add this css code?

    .sidebar_left .content {
    float: right;
    border-left-style: solid;
    border-left-width: 1px;
    border-right: none;
    margin-right: -50px;
    margin-left: -1px;
    padding-left: 50px;
}

    If not, try to override left padding with this css code:

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .sidebar_left .content {
    padding-left: 50px;
  }
}

    2.) Adding this css code might help:

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  #main>.container_wrap_first.template-shop.shop_columns_3>.container {
    display: block !important;
  }
}

    Best regards,
    Ismael

    August 30, 2024 at 12:32 pm #1465782
    advone

    Hi Ismael,

    no, the code is not from me. Where have you find that?
    I cant find in the Quick CSS….

    Both of your codes doesnt take any effect :-(

    August 31, 2024 at 11:05 pm #1465948
    Mike

    Hi,
    1. store page
    When I check your shop page the sidebar and products are centered, see the screenshot below.
    If you want the sidebar to be smaller try adding this css in your quick css field:

    .container .av-content-small.units {
    width: 85%;
}
.sidebar_left .content {
    padding-left: 0;
}

    2. product page
    When I check your product page with Chrome & Safari I do not see:

    If you scroll here, the product image gets bigger and bigger and the page can no longer be used.

    What browser are you using?

    Best regards,
    Mike

    September 9, 2024 at 11:37 pm #1466576
    advone

    Thanks, everything works fine now!! Perfect :-)

    September 10, 2024 at 5:46 am #1466598
    Ismael

    Hi,

    Great! Glad we could be of help. Please let us know if you have more questions.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Problems with Mobile View on Shop and Product Pages (WooWommce)’ is closed to new replies.