Website is not showing mobile view similar to desktop view

This topic has 23 replies, 2 voices, and was last updated 5 days, 17 hours ago ago by Luca Rossi

  • Avatar: Ankit Khandelwal
    Ankit Khandelwal
    Participant
    May 29, 2024 at 04:06

    Website is not showing mobile view similar to desktop view

    Please, contact administrator
    for this information.
    22 Answers
    Avatar: Justin
    Luca Rossi
    Support staff
    May 29, 2024 at 07:35

    Hi @Ankit Khandelwal,

    1. Please edit your home page header under Header Sticky > switch to Mobile display > turn off Main Header Sticky

    https://prnt.sc/g6ISgXFLO88S

    2. If you’re using the Header with Customizer, you can’t change the current layout to look the same as dekstop view. We suggest you to switch to the Header with Elementor Builder: https://xstore.helpscoutdocs.com/article/212-new-xstore-header-builder-with-elementor

    3. You can use Loco Translate plugin to change the Product Category Text: https://wordpress.org/support/topic/change-product-categories-text/#post-14432387

    4. We’re not clear on this question. Could you please tell us which contact form plugin you’re using?

    Thank you for your cooperation and patience. We look forward to resolving this issue promptly.

    Best Regards,
    8Theme’s Team

    Avatar: Ankit Khandelwal
    Ankit Khandelwal
    Participant
    May 29, 2024 at 15:19

    Please help to get it done as per screenshot attached

    Please contact administrator
    for this information.
    Avatar: Justin
    Luca Rossi
    Support staff
    May 30, 2024 at 04:24

    Hi @Ankit Khandelwal,

    1. Header: Please add the following CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

    
    @media (max-width: 600px){
        .header-main h1 {
            font-size: 40px !important;
        }
    }
    @media (max-width: 480px){
        .header-main h1 {
            font-size: 36px !important;
        }
    }
    @media (max-width: 430px){
        .header-main h1 {
            font-size: 32px !important;
        }
    }
    @media (max-width: 390px){
        .header-main h1 {
            font-size: 26px !important;
        }
    }
    @media (max-width: 320px){
        .header-main h1 {
            font-size: 22px !important;
        }
    }
    

    2. Menu: to make the menu items same as desktop, please switch to Header Elementor Builder https://xstore.helpscoutdocs.com/article/212-new-xstore-header-builder-with-elementor

    3. You can try with Contact Form 7 plugin: https://wordpress.org/plugins/contact-form-7/

    Best Regards,
    8Theme’s Team

    Avatar: Ankit Khandelwal
    Ankit Khandelwal
    Participant
    June 1, 2024 at 16:11

    Still header is not corrected, screenshot enclosed

    Content is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    June 2, 2024 at 13:36

    Hi @Ankit Khandelwal,

    We couldn’t find these custom CSS codes on your website. Did you successfully add them?

    
    @media (max-width: 600px){
        .header-main h1 {
            font-size: 40px !important;
        }
    }
    @media (max-width: 480px){
        .header-main h1 {
            font-size: 36px !important;
        }
    }
    @media (max-width: 430px){
        .header-main h1 {
            font-size: 32px !important;
        }
    }
    @media (max-width: 390px){
        .header-main h1 {
            font-size: 26px !important;
        }
    }
    @media (max-width: 320px){
        .header-main h1 {
            font-size: 22px !important;
        }
    }
    

    Best Regards,
    8Theme’s Team

    Avatar: Ankit Khandelwal
    Ankit Khandelwal
    Participant
    June 4, 2024 at 18:39

    Please note already added css code as above but no change Header Background.

    Avatar: Justin
    Luca Rossi
    Support staff
    June 5, 2024 at 08:17

    Hi @Ankit Khandelwal,

    This is how the header looks like on mobile:

    https://prnt.sc/Vzlull1PoUSo

    Could you please check again?

    Thank you!

    Avatar: Ankit Khandelwal
    Ankit Khandelwal
    Participant
    June 5, 2024 at 13:03

    My explanation as below :-
    1. On Desktop – Header is White Background & Black text
    2. On Mobile – Header is Black Background and & white text – This on as per desktop view

    Content is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    June 6, 2024 at 05:43

    Hi @Ankit Khandelwal,

    Could you please check again? We’ve updated the custom CSS a little bit:

    https://prnt.sc/1mUivwcv5qrB

    Thank you!

    Avatar: Ankit Khandelwal
    Ankit Khandelwal
    Participant
    June 6, 2024 at 12:40

    Still the same problem showing in your screenshot, if any further details needed please let me know..

    Content is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    June 6, 2024 at 12:59

    Hi @Ankit Khandelwal,

    1. Main Header
       (a). Background - White
       (b). Text color - Black
    
    2. Menu should be 
     (a). Background - White
       (b). Text color - Black

    Can you please confirm that the changes above should be applied to the mobile version?

    Thank you!

    Avatar: Ankit Khandelwal
    Ankit Khandelwal
    Participant
    June 6, 2024 at 14:43

    These suggested changes for mobile version

    Avatar: Justin
    Luca Rossi
    Support staff
    June 7, 2024 at 06:23

    Dear Mr. Ankit Khandelwal,

    We hope this message finds you well. We are pleased to inform you that we have implemented the changes you requested. You can review the updates at the following link: https://prnt.sc/eUyV2g0h3zyl

    Could you please take a moment to verify the modifications at your earliest convenience?

    Thank you for your attention to this matter.

    Best Regards,
    The 8Theme Team

    Avatar: Ankit Khandelwal
    Ankit Khandelwal
    Participant
    June 7, 2024 at 09:52

    Yes correct header only in website open. Please note that still correction needed as mentioned

    Content is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    June 7, 2024 at 11:01

    Hi @Ankit Khandelwal,

    We’ve updated per your requests.

    Could you please check again?

    Thank you!

    Avatar: Ankit Khandelwal
    Ankit Khandelwal
    Participant
    June 7, 2024 at 15:55

    That great background corrected but more correction needed as below :
    1. Reduce Menu Length as per text (refer screenshot)
    2. No categories to be shown on menu (refer screenshot)
    3. Logo Text font “B R D R” is changed when menu open , please rectify

    Content is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    June 7, 2024 at 16:19

    Hi @Ankit Khandelwal,

    1. It’s default style of off canvas mobile menu, if you reduce the height, you can’t see the sub-menu items.

    2. Please try adding this custom CSS:

    
    [data-tab="menu_2"] {
        display: none;
    }
    

    3. That’s the logo image, you can’t change the font family. To hide it, please add this custom CSS:

    
    .et_b_header-logo {
        opacity: 0;
    }
    

    Hope it helps!

    Avatar: Ankit Khandelwal
    Ankit Khandelwal
    Participant
    June 7, 2024 at 17:02

    For Point 1 – Is it is possible that menu height automatically adjust its height height

    For Point 3 – This HTML block not any image as a logo. So, please correct the font family

    Avatar: Justin
    Luca Rossi
    Support staff
    June 8, 2024 at 01:10

    Hi @Ankit Khandelwal,

    1. It’s not possible right now.

    2. Please check our screenshot: https://prnt.sc/xD7xt_UYrNL-

    Best Regards,
    8Theme’s Team

    Avatar: Ankit Khandelwal
    Ankit Khandelwal
    Participant
    June 8, 2024 at 12:26

    Please note that our Logo is displaying through “HTML Block 2” heading. So, you can correct LOGO in header

    Content is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    June 9, 2024 at 05:41

    Hi @Ankit Khandelwal,

    1. We’ve replaced the logo image with the HTML block, please check again.

    2. We can’t reproduce this issue on our end. Please check on a real device.

    Thank you!

    Files is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    June 9, 2024 at 05:42

    Another screenshot.

    Files is visible for topic creator and
    support staff only.
  • Viewing 23 results - 1 through 23 (of 23 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.