Woodmart issues and customizations

Hello,

I would like to ask you for a help with the following issues: (I am sending images for clarification)

1. Carousel arrows are out of the browser’s screen on my laptop.

2. I am using some custom CSS style in Theme Settings > Custom CSS. But every time I refresh the website at first I see the default woodmart style and then my custom CSS is applied. But this process takes about 1-2 seconds. Can I prioritize my CSS style before woodmart style in order to avoid the transition between two different styles?

3. In categories carousel, you can hover only an image, not a title – the title isn’t clickable. It would be nice if both elements (image and title) would be clickable, because sometimes people think they should click on the title and not the image.

4. My main menu navigation is on two lines on my small laptop. Can I set it to one line or replace it by menu icon as it is on a table / mobile version?

My theme is running on the newest version 6.0.3

Best Regards

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshots you attached.

1&4) Please provide the URL of the website to check it myself and help you out accordingly.

2) Sorry but there is no option in Theme Settings to add priority to CSS as you mentioned.

3) Sorry but there is no option available in Theme Settings for that.

Best Regards

Hello,

Thank you for the response. I will also add some info about my issues:

1. You can see, the same behavior also happens on your demos – carousel arrows are out of the screen (woodmart_demo.png)

2. You can see in the attached video, how CSS is refresh – at first woodmart’s default style is applied and then mine

3. I understand and isn’t it possible to do it by CSS? Just add the title to be clickable too?

4. I am adding two more images to see, how it looks like on my computer (computer.png) and laptop (laptop.png)

In the ‘Privet Content’ I am sending a link for the video mentioned in point 2 and site access

Best Regards

Attachments:

You must be logged in to view attached files.

Hello,

1 &4) Could you please mention your computer screen resolution to check it myself and help you out accordingly.

2) This is because when the browser loads the page, it reads the HTML document from the top to the bottom, from the left to the right. When reading the HTML document, the browser would have read the whole DOM before reaching your CSS and JS scripts and executing them.

The Rendering engine:

The responsibility of the rendering engine as well… Rendering, that is the display of the requested contents on the browser screen. By default, the rendering engine can display HTML and XML documents and images. It can display other types of data via plug-ins or extension; for example, displaying PDF documents using a PDF viewer plug-in. However, in this chapter we will focus on the main use case: displaying HTML and images that are formatted using CSS.

Rendering engines:

Different browsers use different rendering engines: Internet Explorer uses Trident, Firefox uses Gecko, Safari uses WebKit. Chrome and Opera (from version 15) use Blink, a fork of WebKit.

So this only happens because of the Browser Rendering. To avoid it you have to use Cache on your site.

Hope this is all clear now.

3) Sorry but it is not possible with Custom CSS. It requires customizations and this is beyond our limitations and support policy.

Regards.
Xtemos Studios

Hello,

1. & 4. – My screen resolution is 1920 x 1080px. I have noticed that it happens when my browser is zoomed by 110%, what is my default setting. If I have decrease it to 100%, it looks OK. Please see images.

2. Thank you for the explanation

Attachments:

You must be logged in to view attached files.

Hello,

Our theme is Responsive on all devices.

I am sorry but this is not the standard way of testing the site, every Theme in the world uses certain breakpoints to change the layout as per the screen resolution, and Woodmart also based on that theory, Woodmart uses the Bootstrap framework which works on certain predefined rules for the different layouts on different screen resolutions, like for Desktop ( start from 1025px), For Tablets ( from 992px to 1024px) For Mobile. ( end till 1023px) these are the standard points.

So if you test the site like you are doing simply resizing the browser then on a certain point/screen resolution it must break the layout.

You must have to test your site on the real devices OR on the online simulator like Responsinator.

Best Regards

Hello,

Thanks for the fast response. Yes I understand your explanation, but I don’t test the site by changing ZOOM settings. That’s my default Page Zoom setting (please see the image what I mean) and I have found, that it causes some problems, like main menu on two lines. The same situation can happen to my customers, therefore I need to find a way, how to avoid it. Please imagine a use case, that you are a customer with Page Zoom set to 110% and you are viewing my website. What you will find is a main menu on two lines, which I think will immediately lead into closing the webpage by the customer. Therefore I have to solve it, because it could lead into lost of potencional customers.

But depending on your answer above, I agree that responsivity in woodmart is set correctly. That what I am facing is maybe another problem caused by zooming, which could lead into lost of customers.

Best Regards

Attachments:

You must be logged in to view attached files.

Hello,

As for the blog carousel please try this code:

@media (max-width: 1024px){
body div[class*="wd-carousel-spacing"] .owl-nav>div[class*="prev"] {
    margin-left: 50px;
}
body div[class*="wd-carousel-spacing"] .owl-nav>div[class*="next"] {
    margin-right: 50px;
}
}

Please add this code to the Theme Settings > Custom CSS > Global and you can change 50px as per your needs.

As for the header please add this code:

@media (max-width: 1027px) {
  body .whb-hidden-desktop,
  body .whb-hidden-lg {
	display: flex;
  }
  body .whb-hidden-mobile,
  body .whb-visible-lg {
    display: none;
  }
}

If the code does not work as you wish, please provide the access to your site I will double-check and send you the corrected code. Your site is blocked now: https://prnt.sc/11tbpur

Best Regards

Hello,

Thank you for the code. I have followed your instruction, but unfortunately the problem still remains. I have tried to change values to see if it has any effect, but can’t get the desired result. Carousel control arrows are still out of the screen and the main menu is placed on two lines.

Sorry for problems with login, now it should work. I am sending login information again.

Best Regards

Hi,

We didn’t have access to your login page. /wp-admin page contain the following message: (https://prnt.sc/127bmyx)

Best Regards

Hi,

I am sorry, please try one more time, now it should work.

Best Regards

1. Try to replace the previous custom code for arrows with this one:

@media (min-width: 1025px) and (max-width: 1300px) {
body div[class*="wd-carousel-spacing"] .owl-nav>div[class*="prev"] {
    left: -10px;
}
body div[class*="wd-carousel-spacing"] .owl-nav>div[class*="next"] {
    right: -10px;
}
}

2. Breakpoint for header custom code can be set by changing following value (https://prnt.sc/127dsnl). You can set screen width for the moment when your main menu start to collapse. (https://gyazo.com/ca3d64e26fdec13051dd760cc841ff0c). For example 1150px.

Best Regards

Hi,

1. Still it isn’t working. The same problem with hidden control arrows is also in your theme demos – https://gyazo.com/bfade3754a4ba8fd944a2b2fb2310676. As you can see, if my ‘zoom’ setting in the browser is set to 100%, arrows are out of the screen. If the ‘zoom’ is decreased to 90%, they are visible.

I can solve it if I follow your code and set margins. For example I have set margin-left to -70px for the left arrow and the right one I left as it is by default. As you can see, now the left arrow is visible, but it overlaps an element and it isn’t next to that element (I mean article area element). Please see the image left_arrow.png for clarification.

More details about my testing device:
Lenovo IdeaPad 320S-13IKB
13.3″ Full HD IPS display (1920×1080px)
Opera browser version 75.0.3969.171

2. It’s working now, thanks

Attachments:

You must be logged in to view attached files.

Hi,

1. The arrows that you show in our demo is AJAX product pagination arrows that work differently than on a regular carousel, and it required different custom code.

The only way to show carousel arrows on small screen devices smaller than site container width and not to overlap on carousel content is to reduce arrow size and place them in 15px spacing on the content container sides. To make that try to replace the previous custom code with the following one:

@media (min-width: 1025px) and (max-width: 1300px) {
body div[class*="wd-carousel-spacing"] .owl-nav>div[class*="prev"] {
    left: -5px;
}
body div[class*="wd-carousel-spacing"] .owl-nav>div[class*="next"] {
    right: -5px;
}

body div[class*="wd-carousel-spacing"] .owl-nav>.wd-btn-arrow {
	width: 15px;
}
	
body div[class*="wd-carousel-spacing"] .owl-nav>.wd-btn-arrow:after {
		font-size: 16px;
}
}

Kind Regards

[Author]

Posts