Header Using X Pro Header Builder Not Displaying Correctly on Mobile!

Support
#1

Hi, I’m using X Pro with WooCommerce and I’ve produced a header in the header builder using a global block. I’ve managed to get it looking how I want, apart from when you view it on a mobile, it hangs off to the right of the screen and I have no idea why, as I’ve set the rows and columns correctly for each screen view.

Screen Grab
Screen Grab322×776 55.7 KB

I hope you can help me out, as I’ve tried to change various settings on it, but so far nothing has worked!

I’ll put the URL in a secure note as I’ve got a construction page up at the mo and I’ll give you the admin details for it!

Thanks!

#2

Hi @core365,

Thank you for reaching out to us. I checked your setup and the issue was happening because you’ve given static width you logo. I changed the width to 100% and instead set the Max Width to 200px. You also have CSS media query to adjust the logo width in smaller screens, i changed it from 60% to 50% and it seems to have resolved the issue.

Please clear your browser’s cache and test your header. Hope this helps!

#3

Hi @nabeel,

That’s great, thank you! I really appreciate you adjusting the settings for me!

Thanks again!

#4

Hi @core365,

Glad that we are able to help you.

Thanks

#5

Hi, sorry, I seem to have a problem with the nav and cart modals - I changed them to being on the same row with the logo when viewed on a mobile and now the cart modal gets cut off on the right side of the screen! I’ve tried to change this myself with CSS by resizing the modals when viewed on a mobile device, but it doesn’t make a difference!

Also, are there any settings so the modals are responsive so they resize to fit on a smaller screen?

Thanks!

Screen Grab

#6

Hi @core365,

I have checked your website till 280px width breakpoint and the menu works fine, also checked in different mobile devices and the result was the same. Can you please let us know what was the screen size you checked, or the device you checked?
Regarding the modal, it is already responsive, and the content will adjust based on the screen size.

Thanks

#7

Hi @tristup,

It’s when I go to ‘Customize Pro in Theme Options’ and resize the window, so it must be below the 280px breakpoint where it happens.

Thanks!

#8

Hi @core365,

You have nothing to worry about the layout 280px below because most on the actual devices the smallest screen size is 320px and your website is just looking fine on 320px up.

Hope that helps.

Thank you.

#9

Hi @marc_a,

Ah ok! I didn’t think there were many screen sizes that exist at that size - I was just trying to cover everything as my client is very scrupulous!

Thanks for your help and advice!

#10

Hi @core365,

Yes, there’s no screen exists 280px below nowadays, the smallest screen size is 320px.

You’re welcome and it’s our pleasure to help you. If you have any other concerns, feel free to reach us.

Thank you.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.