Return to previous page

Responsiveness while and mobile elements fonts issues

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

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.

#418173 Copied Theme version: 9.4.2

12 Answers

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?

#418255 Copied

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

#418396 Copied

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.

#418435 Copied

mecenas666

Participant

October 14, 2024 at 16:04

Any news?

#418629 Copied
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
#418691 Copied
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.

#418754 Copied

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?”

#418818 Copied
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.
#419054 Copied
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?

#419060 Copied
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!
#419159 Copied
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)?

#419555 Copied

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

#419602 Copied
Viewing 13 results - 1 through 13 (of 13 total)