Home › Forums › WoodMart support forum › How can i extend the way the categories banners look for max-width 768px?
How can i extend the way the categories banners look for max-width 768px?
- This topic has 12 replies, 2 voices, and was last updated 2 years, 3 months ago by
Aizaz Imtiaz Awan.
-
AuthorPosts
-
October 20, 2022 at 5:04 pm #415323
supp0rtParticipantHello,
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
October 21, 2022 at 9:13 am #415472
Aizaz Imtiaz AwanKeymasterHello,
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.
October 21, 2022 at 9:21 am #415474
supp0rtParticipantYes 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
October 21, 2022 at 3:31 pm #415611
Aizaz Imtiaz AwanKeymasterHello,
Can you please share the WP admin login details of your site so I will check and solve the issue.
Best Regards.
November 11, 2022 at 9:24 am #420302
supp0rtParticipantHello,
I have provided the requested admin URL.
Let me know if you need anything else.
Best Regards
November 11, 2022 at 2:28 pm #420410
Aizaz Imtiaz AwanKeymasterHello,
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.
November 11, 2022 at 3:06 pm #420413
supp0rtParticipantThank 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
November 12, 2022 at 9:35 am #420547
supp0rtParticipantUpdate:
I have created a testing site that you can check. Below are the credentials.
Tested and they work as expected.Best Regards
November 12, 2022 at 10:00 am #420549
Aizaz Imtiaz AwanKeymasterHello,
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
November 12, 2022 at 10:37 am #420553
supp0rtParticipantHello,
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
November 12, 2022 at 4:04 pm #420603
Aizaz Imtiaz AwanKeymasterHello,
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
November 13, 2022 at 10:33 am #420683
supp0rtParticipantThank 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
November 14, 2022 at 8:43 am #420833
Aizaz Imtiaz AwanKeymasterMost 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. -
AuthorPosts
The topic ‘How can i extend the way the categories banners look for max-width 768px?’ is closed to new replies.
- You must be logged in to create new topics. Login / Register