• Resolved theteafarm

    (@theteafarm)


    hello,

    i added this code:

    @media (max-width: 768px) {
    #content .product-item {
    margin-bottom: 50px;
    overflow: hidden;
    width: 46%;
    float: left;
    margin: 2%;
    height: 280px;
    }
    }

    to make the products display 2 items instead of 1 in mobile view. it worked but when i turn the phone side ways, it shows the pictures big.

    would anyone know what i can change to fix the mobile side view?

    http://www.peonypearls.com/shop

    thank you in advance.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    How should it be displayed?

    Thread Starter theteafarm

    (@theteafarm)

    The horizontal mobile view should be the same as the vertical.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Don’t the images just do what you’ve coded though? They’re set to be almost 50%-wide of the screen.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Unless I’m missing the point. What do you mean by ” it shows the pictures big”?

    Thread Starter theteafarm

    (@theteafarm)

    So when I turn my phone side ways. The picture is a lot bigger and it displaces the product box and add to cart button etc.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Oh are you looking at another page?

    Thread Starter theteafarm

    (@theteafarm)

    No so it is the same page on an iPhone. When the iPhone is vertical, it displays 2 products wit picture and add to cart button.

    But if you turn the phone side ways. It shows just 2 pictures without the product frame and add to cart button.

    Peonypearls.com/shop

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Ahah, I see now! It’s because of the height and the overflow. You’ve set a height of 280px on the thumbnail and the product frame and add to cart button. Try removing that height.

    Thread Starter theteafarm

    (@theteafarm)

    yes. that worked! thank you

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

The topic ‘CSS question and mobile side view error’ is closed to new replies.