Support » Theme: Virtue » Problem displaying on iPhone

  • Hello.
    If you open http://thetacticalboots.com/ on iphone in vertical position
    and scroll all away down you will see what I’m talking about.
    It’s happened only in vertical position. Please let me know how can I fix it.
    Thanks, Olexiy.

Viewing 8 replies - 1 through 8 (of 8 total)
  • hannah

    (@hannahritner)

    Hey,
    Not sure what is forcing that. For nor try adding this to your custom css box in Theme Options > Advanced Settings:

    @media (max-width: 480px) {
    #containerfooter {
        margin-top: 100px;
    }
    }

    Hope that helps!
    Hannah

    I’m seeing that you are adding this css:

    .tcol-md-3.tcol-sm-4.tcol-xs-6.tcol-ss-12.kad_product{
       position: relative !important;
       left: 0px !important;
       top: 0px !important;
    }

    Which is causing the issue. Can I help you fix with maybe some better css if you tell me what your purpose was in adding the above?

    Kadence Themes

    Thread Starter olexiy

    (@olexiy)

    .attachment-shop_catalog.size-268x268.wp-post-image{
        max-width: 268px;
        max-height: 268px;
        height: 268px;
        width: 100%;
        object-fit: contain;
    }
    
    .tcol-md-3.tcol-sm-4.tcol-xs-6.tcol-ss-12.kad_product{
       position: relative !important;
       left: 0px !important;
       top: 0px !important;
    }

    A plugin I use (WooZone) imports all of the images and I have no control over the image sizes. The reason for that code was to keep all of the items in a neat grid. Because all of the item’s images are different sizes, they are all setup unevenly and unorganized. This code fixes that issue. I removed this code for 24 hours. If you’d like an example, open the Accessories category and see for yourself.

    Thank you – Olexiy

    ok, use this css instead of what you had previously added:

    .product_item a.product_img_link {
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .product_item a.product_item_link img {
        height: 100%;
        width: auto;
    }

    Kadence Themes

    Thread Starter olexiy

    (@olexiy)

    Thank you very much for the support. I appreciate that the actual theme author helped me with my problem! I can now see how great Virtue Theme support really is.

    I tried your code and it fixed the problem, however it also created a new one in its place. Your code lined all of the items back up however now the images have been distorted. For that I added my own line of code

    .product_item a.product_item_link img {
        height: 100%;
        width: auto;
        object-fit: contain;
    }

    and now the category pages look perfect, on both mobile and desktop.

    The problem I’m having after I used your CSS (without my modification) is that the home page images seem extremely long and those are distorted instead. To display those images I used shortcode from Woocommerce [best_selling_products per_page="8"] and similar.

    Is it possible for you to provide code to fix this issue as well?

    Thank you – Olexiy

    • This reply was modified 7 years, 2 months ago by olexiy.
    • This reply was modified 7 years, 2 months ago by olexiy.
    hannah

    (@hannahritner)

    Hey Olexiy,
    Try decreasing the height in your css. So try something like this:

    .product_item a.product_img_link {
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .product_item a.product_item_link img {
        height: 100%;
        width: auto;
    }

    Does that work?

    Hannah

    Thread Starter olexiy

    (@olexiy)

    Thank you for the reply Hannah.

    Usually before I ask a question, I attempt to fix the problem on my own.
    When I decrease the height, long images will get out of the item box on the home page (see attached image). Meanwhile, on the product page (Category page), the images get very small.
    Thank you, Olexiy. http://imgur.com/a/FU3BI
    Home page

    • This reply was modified 7 years, 2 months ago by olexiy.
    • This reply was modified 7 years, 2 months ago by olexiy.
    hannah

    (@hannahritner)

    So if you’re wanting all your products the same height and you have some images that are really long and others not then there is going to be extra space. Can you give more detail as to what exactly you’re wanting? Sorry for not understanding.

    Hannah

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Problem displaying on iPhone’ is closed to new replies.