How can i extend the way the categories banners look for max-width 768px?

Hello,

I have the Product categories element displayed as a carousel.
For some reason, after the 576px the position of the category title changes and is displayed below the banner’s image.

How can I make it look like it is below the 576px and up to 768px?

Best Regards

Hello,

I did not see any issue on the page, the carousel is showing fine on the mobile as well: https://ibb.co/R79K929

Can you please share the screenshot of the issue for a better understanding?

Best Regards.

Yes of course. here is a snipping: https://snipboard.io/kMmIAb.jpg

The change in the layout can be seen after the 576px screen width. The image above was taken at a 583px screen width.

Let me know if you need any more information.

Best Regards

Hello,

Can you please share the WP admin login details of your site so I will check and solve the issue.

Best Regards.

Hello,

I have provided the requested admin URL.

Let me know if you need anything else.

Best Regards

Hello,

Firstly, the provided Logins are incorrect.

Secondly, we have checked on larger device Mobile view, the Category Title seems to be appearing fine: https://ibb.co/WvHY04R

Moreover, the dimensions you are mentioning are not standard ones. There are many dimensions like that when you resize your browser or check on the browser inspect tool. So, to check the responsive issue it’s better to check on a real-time device and then check back the issue again. This will get you a better idea.

Hope you can understand!

Best Regards.

Thank you for your reply.

You can try again to log in with the provided credentials. Checked and they work.

Regarding the width that I am talking about, this is a media query that is provided by the theme.

To be more specific, you can find the media query that goes only up to 576px, which is a CSS media query inside the file I provide below.

I can check on a real device and see that this appears ok, but as you may also know, they are hundreds of device widths out there.

So I think is better to get the way the categories display, up to 768px, and then change it for the next set of devices.

Most of the styles are somewhat categorized for up to 3 devices that scale for all elements that the theme provides. But this specific one (categories carousel) does this break point. This does not make much sense.

If you can provide any information, on why the front-end developer chooses this, or if there is any problem that occurs for devices between 577px and 768px, please let me know and I will be more than happy to listen.

Let me know if you need any more information from my end.

Best Regards

Update:

I have created a testing site that you can check. Below are the credentials.
Tested and they work as expected.

Best Regards

Hello,

Sorry to say but as soon as we enter the Login Information under the WP-ADMIN of your Site, it leads to a Forbidden Page: https://ibb.co/wBZptCC

It seems that there are some Restrictions from your end. Try removing any sort of Restrictions and then mention us so that we can proceed further.

If you apply any CSS, under the Theme Settings > Custom CSS > Custom CSS for mobile > it will pick up the 576px media query. This media query is a standard Bootstrap media query which is generally used to target smaller mobile devices whereas 768px can be used explicitly to target medium range of devices.

You can read more about Breakpoints here on the following Bootstrap Article:
https://getbootstrap.com/docs/5.0/layout/breakpoints/

This is just for your understanding.

Best Regards

Hello,

I have updated the credentials to a new address. If you try to login into the previous admin page this will not be possible. Please also try to avoid any private networks.

Thank you for your article on bootstrap.
So as I see, there is a problem with the theme and bootstrap, or with the owl library that you are using. It seems that bootstrap does implement also for medium devices up to 768px. Right from the bootstrap article:

Medium ≥768px

Also, there are up to 5 breakpoints in the article. So, some modification and probably concatenation is made, as the theme implements 3 breakpoints of them in the settings, but wp-bakery implements 4.

Is it possible that the theme can extend the bootstrap-generated CSS styles and include the Medium bootstrap breakpoint?

Best Regards

Hello,

The Logins are now working. So, we have now tried to target the specific in-between Media Queries and applied Custom CSS on your Site to adjust the Categories Title issue and now it appears fine for all.

You can check your Site on the following Responsive mode viewer (i.e. Responsinator): http://www.responsinator.com/

Please check back your Site after completely clearing browser and server cache.

Best Regards

Thank you for your help and the guidelines. I will apply the changes on the live site as well.

Feel free to close this ticket.

Best Regards

Most Welcome!!!

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts