- Posts
I am using a Crio theme through Inmotion Hosting set up with bold grid.
I cannot finish because the top images will not resize for Mobile.
There has to be a CSS code to help them along or is it Boldgrid Builder or Crio theme?
The Theme Editor or the CSS in the Customizer, or is it both that need Code?
Joy
Hello Joy,
Thank you for reaching out to our support team.
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.
I was looking over your site and all the images that displayed seams to work on mobile. However, if you are still working on the site and you are trying to update the images to be accepted on mobile you can create images for mobile specifically. Then in the edit page you can click the “Advanced Control” from the black button at the bottom of the container and only set visibility for desktop and phone.
Also, in Post & Page builder in the menu in the editor you can switch from the different phone, tablet, desktop and large displays.
Hope that helps, let us know if you have any further questions.
Elana.This site shows the Home page image on Mobile fits, however the other pages top image, is cut off in Mobile. Home and all other pages image width is 1920px. I have two other Boldgrid sites using Crio themes that will not resize either. What code goes in Top of Page (not Header with logo and nav menu) that will make the images responsive?
Hello Joy,
Thank you for reaching out to our support team.
I can’t see the images on your other pages because they are throwing 404 (not found) errors stating they are missing.
However, you could try first by setting the section width to 100% by clicking the “Section Width” on the container. Like Below:
If that doesn’t work you can add a Custom ID to the block with the background. In the below example that Jesse created, he shows how to create a custom CSS ID called my-custom-background as the custom ID.
Custom CSS to force it to scale down correctly:
#my-custom-background { background-size: contain !important; background-repeat: no-repeat !important; }Let me know if this helps or if you have any further questions.
Elana.
I watched the video.
I made sure the width was 100% for every page.
All images are on the pages now.I added the Custom ID to each background image: my-custom-background
I added the CSS code in Customizer CSS/JS.#my-custom-background {
background-size: contain !important;
background-repeat: no-repeat !important;
}I purged all the cache when I finished.
I did a speed test for the website.
Mobile test was very low, but Desktop was good.Could it be the # in front of the CSS code?
Do you know how to fix this?
If not, can Jesse take a look at it?Thank you
.Hello Joy,
Thank you for reaching out to our support team!
I noticed that the images you referenced from the video aren’t directly related to mobile page speed. Additionally, I see that you’re using WP Fastest Cache rather than W3 Total Cache. Since we specialize in W3 Total Cache, I’m unable to provide specific guidance on the settings for WP Fastest Cache.
However, based on a quick review using Google PageSpeed Insights, you may want to look into enabling WebP conversion, eliminating render-blocking resources, and adjusting settings for minification and delayed asset loading to improve performance.
For a more detailed analysis, a full performance audit would be required, which can be purchased if you’re interested in switching to W3 Total Cache.
Let me know how you’d like to proceed!
Elana.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
