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?

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • October 20, 2022 at 5:04 pm #415323

    supp0rt
    Participant

    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

    October 21, 2022 at 9:13 am #415472

    Aizaz Imtiaz Awan
    Keymaster

    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.

    October 21, 2022 at 9:21 am #415474

    supp0rt
    Participant

    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

    October 21, 2022 at 3:31 pm #415611

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    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

    supp0rt
    Participant

    Hello,

    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 Awan
    Keymaster

    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.

    November 11, 2022 at 3:06 pm #420413

    supp0rt
    Participant

    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

    November 12, 2022 at 9:35 am #420547

    supp0rt
    Participant

    Update:

    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 Awan
    Keymaster

    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

    November 12, 2022 at 10:37 am #420553

    supp0rt
    Participant

    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

    November 12, 2022 at 4:04 pm #420603

    Aizaz Imtiaz Awan
    Keymaster

    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

    November 13, 2022 at 10:33 am #420683

    supp0rt
    Participant

    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

    November 14, 2022 at 8:43 am #420833

    Aizaz Imtiaz Awan
    Keymaster

    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
Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘How can i extend the way the categories banners look for max-width 768px?’ is closed to new replies.