Responsive Display on Phones

Home Forums Jevelin Theme Responsive Display on Phones

Home Forums Jevelin Theme Responsive Display on Phones

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    RESOLVED Posts
  • Not sure which direction I go to correct the responsiveness of products in the store in WooCommerce on the Jevelin theme.  I have attached a screenshot of how the products are appearing.  I have the Responsive featured turned on on the Theme.

     

    Can you direct me on how to correct this?

     

    Thanks a million!!

     

    https://www.elliecustombridal.com/

    Attachments:
    You must be logged in to view attached files.

    Hi @kbsign,

     

    I hope you are well today and thank you for your question.

     

    You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    @media (max-width: 470px){
    .woocommerce .product .related .product {
        width: 100% !important;
    }    
    }
    

     

    Best regards,
    Shufflehound team

    Thank you for your quick reply!!  I truly appreciate your help!!

     

    Unfortunately, that didn’t correct the problem.

    I have attached a current screenshot.

     

    https://www.elliecustombridal.com/

    Attachments:
    You must be logged in to view attached files.

    I thought you were only talking about related products as shown in your initial screenshot.

     

    To make it work on all other places please try using below custom CSS code.

     

    @media (max-width: 470px){
    .woocommerce ul.products li.product {
        width: 100% !important;
    }    
    }
    

    I have two tickets open — so I am combining them so you can see what I have in the custom CSS box, to make sure I am not missing something here.

     

    The new correction you sent for changing the color of the word HOME on the home page.  It appears the gold color when you are on a different page, but when you are on the home page, it appears blue.  The correction you sent, that I added to the CSS box didn’t work. (I deleted cache.)

     

    The products are still appearing non responsive on a cellphone.  The code you sent, the ‘li.product’  didn’t have an ‘s’ on it — I tried it both ways, and it didn’t work.  Do I want both @media corrections?

     

    https://www.elliecustombridal.com/

     

    This is what is currently in the CSS box on the site:

     

    @media (max-width: 470px){
    .woocommerce .product .related .product {
    width: 100% !important;
    }
    @media (max-width: 470px){
    .woocommerce ul.products li.product {
    width: 100% !important;
    }
    #page-container .sh-header .sh-nav > .current_page_item > a {
    color: #e3a627!important;
    }

     

    Again – THANK YOU for your help!!  Truly appreciate it!!

     

    Blessings,

    Kara

    Attachments:
    You must be logged in to view attached files.

    It works fine for me on the browser but not sure why not for you.

    Would you mind if i log in to your site and do some troubleshooting? If this is ok then could you please share me your site log in details privately by adding them in the box having text “Click here to share private content. Only you and forum moderators will bee able see it.”?

    Thanks, I appreciate that!!  I have included in the info in the box.

     

    Thanks!!

    Solution for this topic

    I logged in to your site and found you were using the code incorrectly so i have corrected it as following.

     

    #page-container .sh-header .sh-nav > .current_page_item > a {
        color: #e3a627!important;
    }
    @media (max-width: 470px){
    .woocommerce .product .related .product {
        width: 100% !important;
    }   
    .woocommerce ul.products li.product {
        width: 100% !important;
    }    
    
    }

     

    Could you please check whether everything is working fine now?

    Everything is fabulous!!  Thank you!!

     

    I totally appreciate it!!

     

    Blessings,

     

    Kara

    You are always welcome here 🙂

Viewing 10 posts - 1 through 10 (of 10 total)