-
Posts
-
After finding out that if the footer text is to long it creates a “run off” on mobile past the screen. Well now I can’t seem to figure out how to get bold grid to scale text and images down to where you can view the entire image uploaded. Even the text seems to stay the same size on mobile as it does on desktop.
The picture attached shows a portion of the image below the header. And I did shorten the footer text but it stills seems to run off a little.
Can anyone help with making bold grid to scale down to mobile properly?
Here is the link to site but in order to see what I am saying you have to view it mobile. I also attached a screentshot. http://www.LegionoftheLeprechaun.com
Any help would be greatly appreciated! Thank you!
Hi Chad.
I’m sorry to see that you are experiencing issues with the responsiveness of your BoldGrid website. If you create a new footer Text Widget with the long text you were using, this corrects the run-off you mentioned in your previous question. Under the section titled “Getting Shortcode and Adding Widget” in our guide “How to add Shortcodes to Text Widgets“, start at Step 3 if you need assistance with how to make the Text Widget in the footer.
I’m still trying to diagnose the issue with the appearance of the image you are reporting. I will respond back once I have some more details.
Thank you carlosd!
We are using the Swifty theme.
Hello again.
You’re welcome, thanks for the extra information. I am unable to replicate the issue when I change the image or with the default image. What are the dimensions of the image you are using? Or is this occurring with the original image?
Dimensions: 1640 × 624. When viewing on mobile it should resize the image down in scale so you can see the entire image like you can on desktop. The footer widget you mentioned worked btw.
Awesome, I’m glad that the footer Text Widget worked for you. For the Background Image settings in the Customizer, I recommend using:
Background Effects – Fixed
Background Image Size – Scaled to Fit
Those both work for the image I am using, which is smaller than the default (1920 x 1080). For your specific image size, I recommend using the same settings but then adjusting the Vertical and/or Horizontal Position sliders to adjust it to best fit as it appears in the mobile preview.
I hope this helps!
Is there not any CSS script to make everything just adapt to mobile. I guess I just figured that bold grid was optimized for mobile. It seems to be optimized for desktop but have to make a lot of changes to make it optimized for mobile. I guess I am just confused why the platform is not already mobile friendly.
Unfortunately there is not a CSS script to make everything adapt to mobile (at least not a single script in itself). Rather, BoldGrid designs are built with a CSS framework called Bootstrap, which is a “mobile-first” framework. This means the framework itself was made specifically to prioritize mobile responsiveness. And Bootstrap CSS selectors will work on your page, if you choose to mix and match them with what’s already available. The whole framework itself is available to you so you can tweak your pages to get the exact look you want. The Inspirations are a starting point and require some adjustment.
- The topic ‘How to make bold grid fully responsive on mobile?’ is closed to new replies.
