Responsiveness while and mobile elements fonts issues

This topic has 13 replies, 2 voices, and was last updated 1 weeks, 4 days ago ago by Luca Rossi

  • Avatar: mecenas666
    mecenas666
    Participant
    October 10, 2024 at 14:38

    Hello, i have few problems there, maybe u can help:

    1. Why when i am decreasing browser window size all elements are not responsive then? Header is responsive, but for example woocommerce shop content is sticked to the right. See attachment. I need to hit F5 after making window smaller for the content to reload in new size and be visible once again. It looks like something is blocking content from beaing rendered in real time.

    2. How can i change/set logo in mobile checkout page? I have added logo to the desktop checkout, but it is not visible on mobile.

    3. How can i change font for:
    a) mobile side panel
    b) my account, cart and favorites in header after opening?
    c) bottom mobile navigation bar?

    4. In hero section of homepage (slider), when u enter the site then u see white bars at the left and right and after few seconds they become green. I think it is sitewide problem, i see this white bars in many places after entering the page. Looks like space out of boxed layout is taking colours too late.

    5. In single product page/template we have 3 tabs in Single Product Tabs but only 2 are visible – why? And i see the content there is created strictly with elementor, so we need to add text with elementor always. Can we connect this somehow with stanbdard products desription field? I dont think we will be able to edit every product with elementor, we rather need to stick to the standard woocommerce product editor.

    6. Why i dont see Sticky Cart in single product page although it is there in elementor editor?

    Thank u!

    Please, contact administrator
    for this information.
    Files is visible for topic creator and
    support staff only.
    12 Answers
    Avatar: mecenas666
    mecenas666
    Participant
    October 11, 2024 at 08:35

    Any news?

    Can u also check why Wishlist is not working? For example in my account page?

    Avatar: Justin
    Luca Rossi
    Support staff
    October 12, 2024 at 14:01

    Hi @mecenas666,

    Upon checking your website, we could see there are some Javascript errors in the Console Log.

    Could you please help us to do the following things below for testing conflicts?

    – Disable all non-essential third-party plugins that are not included in the XStore theme package. A list of plugins that are part of the XStore package can be found here: [Included Plugins](https://www.8theme.com/documentation/xstore/plugins/included-plugins/). After deactivating the unnecessary plugins, please clear your browser’s cache and verify if the performance issue persists. This is an important step as third-party plugins can often lead to conflicts.

    – Temporarily disable all your custom codes in your child theme to make sure this issue is not coming from your custom codes.

    Let us know how it goes!

    Best Regards,
    8Theme’s Team

    Avatar: mecenas666
    mecenas666
    Participant
    October 13, 2024 at 08:21

    Please check now, disabled all the unnecessary plugins despite loco translate.

    For the custom code – we don’t use any, only few css tweaks that I have from u in separate ticket to customize colours.

    Avatar: mecenas666
    mecenas666
    Participant
    October 14, 2024 at 16:04

    Any news?

    Avatar: Justin
    Luca Rossi
    Support staff
    October 15, 2024 at 06:34

    Hi @mecenas666,

    Sorry for the latest response because of the weekend. Next time, please don’t self reply to your topic, it will move your topics to the bottom of the queue then you will wait more time.

    1. We’ve reduced the margin between the menu items of left navigation so it looks better now: https://prnt.sc/9sTabFoGDMto. When we resized the window, there are some Javascript errors from the Elementor Pro plugin, we guess those errors are causing the responsive issues of your header elements. We suggest you to contact to the Elementor Support Team about that: https://elementor.com/support/

    2. That logo is used for both mobile & desktop, but it’s hidden on mobile device, please try adding this custom CSS codes under XStore > Theme Options > Theme Custom CSS > Global CSS:

    
    .woocommerce-checkout .header-main .et_column.et_col-md-3.et_col-md-offset-0.hidden-xs {
        display: block !important;
    }
    

    3. Please edit your mobile menu element, under Style tab > Off Canvas / Dropdown > then set the font: https://prnt.sc/40wboOSPOeZx

    4. Please edit your home page, then change the Page template to Elementor Full Width: https://prnt.sc/KPHWFCyPC7wN

    5. Please note that the “Additional Information” tab will only show if the product has weight, dimensions or attributes (not used for variation for variable products).

    6. The sticky cart form is displyaing just fine on our end: https://prnt.sc/RlMOhd5WJUb4

    Best Regards,
    8Theme’s Team

    Avatar: mecenas666
    mecenas666
    Participant
    October 15, 2024 at 13:05

    Thank u. Can u chceck last thing – wishlist page is not working. U can open wishlist in header but when u try to redirect to wishlist pahe (or choose wishlist on My Account page) it is not loading at all.

    Avatar: mecenas666
    mecenas666
    Participant
    October 15, 2024 at 20:38

    And for this question (number 3) I was not asking about elementor menu in header, but I was asking for XStore Mobile Panel (this one that is at the bottom of the screen when u are previewing website on mobile and is available in store settings) :

    “3. How can i change font for:
    a) mobile side panel
    b) my account, cart and favorites in header after opening?
    c) bottom mobile navigation bar?”

    Avatar: Justin
    Luca Rossi
    Support staff
    October 17, 2024 at 05:47

    Hi @mecenas666,

    1. We’ve created a static page for Wishlist, now it’s working fine.

    2. The fastest way is using the custom CSS codes, please add this custom CSS codes also:

    
    .et-mobile-panel .et_column>a .et_b-icon+span {
        font-size: 16px;
        color: #4B692A;
        font-weight: bold;
    }
    
    .et-mobile-panel .et-mini-content .menu li a {
        font-size: 16px;
        color: #4B692A;
    }
    
    .et-mobile-panel .et-mini-content .menu li a img {
        margin-left: 8px;
    }
    

    Hope it helps!

    Please contact administrator
    for this information.
    Avatar: mecenas666
    mecenas666
    Participant
    October 17, 2024 at 06:49

    All works, thanks!

    Despite one thing:

    That logo is used for both mobile & desktop, but it’s hidden on mobile device, please try adding this custom CSS codes under XStore > Theme Options > Theme Custom CSS > Global CSS:

    .woocommerce-checkout .header-main .et_column.et_col-md-3.et_col-md-offset-0.hidden-xs {
    display: block !important;
    }

    This fix works well for checkout page (I see there logo on mobile now), but in cart page it is still not there. Can u check?

    Avatar: Justin
    Luca Rossi
    Support staff
    October 17, 2024 at 12:21

    Hi @mecenas666,

    Can you please help me to update the custom CSS code to this?

    
    .woocommerce-cart .header-main .et_column.et_col-md-3.et_col-md-offset-0.hidden-xs,
    .woocommerce-checkout .header-main .et_column.et_col-md-3.et_col-md-offset-0.hidden-xs {
        display: block !important;
    }
    

    Hope it helps!

    Avatar: mecenas666
    mecenas666
    Participant
    October 20, 2024 at 08:49

    Thank u, works. Is there any difference if I put this css code under Custom CSS section or Theme Custom CSS (Global)?

    Avatar: Justin
    Luca Rossi
    Support staff
    October 21, 2024 at 05:20

    Dear @mecenas666,

    We hope this message finds you well.

    We would like to inform you that both locations are indeed the same.

    Thank you for your attention.

    Best regards,
    The 8Theme Team

  • Viewing 13 results - 1 through 13 (of 13 total)

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

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