Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • May 12, 2025 at 4:43 pm #1484101
    volkantuncer

    I am using following css code to put two products on on line in mobile design

    but because of this my mobile view is not showing products in the middle

    Tha gap in left side is smaller than the right side

    How can I solve this situation ?

    I like the product design to be in the middle

    https://www.teknolom.com/magaza/

    Thank You

    @media only screen and (max-width: 736px) {
    .avia_textblock pre, .responsive #top #main .products .product {
    width: 45.6% !important;
    margin: 0 4% 1% 0;
    }}

    @media only screen and (max-width: 480px){
    .responsive #top .av-masonry-entry{width:100%;
    width: 45.6% !important;
    margin: 0 4% 1% 0;

    }
    }

    May 13, 2025 at 6:01 am #1484129
    Ismael

    Hey volkantuncer,

    Thank you for the inquiry.

    Try to add this css code to make sure the products are centered.

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

  /* Add your Mobile Styles here */
  .responsive #top #main .product-sorting.avia-product-sorting+.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .responsive #top #main .products .product:nth-child(even) {
    margin-right: 0;
  }
}

    View post on imgur.com

    Best regards,
    Ismael

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