- Posts
I’m running into a big issue. I’m using your theme Crio via Dreamhost and I need the page to be full width. Everything works fine on desktop but on mobile the page moves side to side as if the container is bigger than the display. Please can you help. Thanks
I am having exactly the same issue as the post below but the supplied remedy does not help.
Do you have any idea what this could be?
Thanks
Hi Joe,
Thanks for reaching out and thank you for using Crio Pro WordPress theme!
I think your issue is very similar to the one mentioned in the thread. I inspected your website and I see this issue is present on almost all pages on the site which leads me to believe that there may be some negative padding inside of one of your global elements. I’ve often see this when someone is using a custom page header or footer, as it uses the same drag and drop functionality as BoldGrid Post and Page Builder so the same issue could still present themselves.
If you are using custom page headers or footers I suggest editing them to make them full width as well. You can use the same method as stated in the video that you would use with “Post and Page Builder” full width blocks.
I hope this helps. Please let us know if you have any other questions for us!
Thank you this was the issue. However, my dropdown menu is now not rendering correctly. You can see this is crunching up the letters.
I have searched the forum and looked at the code but I cannot seem to work out what the issue is. Any chance you have a solution?
Thanks
Thank you Joe!
I’m happy you were able to single out the issue. This seems to be a simple padding issue as well in regards to your menu items. If you don’t mind, can you pull up your custom header in the editor and click the “Text” icon to switch to HTML formatting, then copy all the HTML you see there and paste it into the forum here for us.
We will inspect your HTML and try to resolve the padding issues for you, and send you back clean code that you can insert back into your custom header.
I hope this helps. We look forward to hearing back from you!
Thank you!
Here is the code:
<div class=”boldgrid-section” data-image-url=”https://grepre5.dream.press/wp-content/uploads/2022/04/pexels-belle-co-5169050-scaled.jpg” style=”background-image: linear-gradient(to left, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.76)), url(‘https://grepre5.dream.press/wp-content/uploads/2022/04/pexels-belle-co-5169050-scaled.jpg’); background-size: cover; background-position: 50% 46%;” data-bg-overlaycolor=”rgba(255,255,255,0.76)”>
<div class=”container-fluid”>
<div class=”row”>
<div class=”col-md-2 col-sm-12 col-xs-12″>
<div class=”boldgrid-component-logo boldgrid-shortcode” data-imhwpb-draggable=”true” style=”margin: 15px 0px;”>[boldgrid_component type="wp_boldgrid_component_logo" opts="%7B%22widget-boldgrid_component_logo%5B%5D%5Bbgc_logo_switch%5D%22%3A%22site_logo%22%2C%22crio_premium_update_site_logo_nonce%22%3A%22bb1136c255%22%2C%22_wp_http_referer%22%3A%22%2Fwp-admin%2Fadmin-ajax.php%22%2C%22crio-premium-site-logo-preview%22%3A%22368%22%2C%22widget-boldgrid_component_logo%5B%5D%5Bbgc_alt_logo%5D%22%3A%221245%22%2C%22widget-boldgrid_component_logo%5B%5D%5Bbgc_logo_alignment%5D%22%3A%22center%22%7D"]
</div>
</div>
<div class=”col-md-8 col-sm-12 col-xs-12″>
<div class=”boldgrid-component-menu boldgrid-shortcode standard-menu-enabled header-top” data-imhwpb-draggable=”true” style=”font-size: 6px; letter-spacing: 0.3em; margin: auto 114px; width: auto;”>[boldgrid_component type="wp_boldgrid_component_menu" opts="%7B%22widget-boldgrid_component_menu%5B%5D%5Bbgc_menu_location%5D%22%3A%22SMA%22%2C%22widget-boldgrid_component_menu%5B%5D%5Bbgc_menu_location_id%5D%22%3A%22sma_961%22%2C%22widget-boldgrid_component_menu%5B%5D%5Bbgc_menu%5D%22%3A%2232%22%2C%22widget-boldgrid_component_menu%5B%5D%5Bbgc_menu_align%5D%22%3A%22center%22%7D"]
</div>
</div>
<div class=”col-md-2 col-sm-12 col-xs-12″>
<div class=”boldgrid-shortcode” data-imhwpb-draggable=”true” style=”margin-top: 134px;”>[boldgrid_component type="wp_search"]
</div>
</div>
</div>
</div>
</div>Thanks Joe!
Try replacing your current HTML with this modified block and let us know solves the issue for you.
We’re looking forward to your reply!
Thank you, unfortunately this did not work. I have just rebuilt the header as I think this was an easier solution for everyone.
Thankyou for your help.
Joe
Thanks Joe,
I think the problem with the edit was the fact that we can’t import your specific menu to select it’s CSS classes and that makes it a bit harder to locate the proper elements.
Awesome job on rebuilding your header! Please don’t hesitate to reach back out if you have any other questions for us.
- The topic ‘Mobile Website Rendering on The Left’ is closed to new replies.
