-
The section on my home page that says “why we are the best” how can I make that text and section smaller to fit better on mobile?
-
On the home page at the bottom I have reviews. I wanted to add the star icons like 5 next to each other in a row, however I can not figure out how to make the icons appear close in a row…
-
I am not sure what code I messed up but now on mobile there headlines of pages runs into the logo at the top… I need that margin space back on mobile only
-
the logos picture on my princess business events page the picture is only centered on mobile not on desktop.
Hi,
- You can add a class to your headline.
Then target it in your css
@media (max-width: 480px) {
.home .my-headline {
font-size: 40px !important;
}
}
- You can add this in a text element in a row
[x_icon type="star"][x_icon type="star"][x_icon type="star"][x_icon type="star"][x_icon type="star"]
- To fix it, you can add this in Custom CSS
body:not(.home) .masthead {
height:90px;
}
- Can you provide us the exact url of the page.
Thanks
-
That did not work. I am trying to make the “why we are the best” headline smaller on Mobile and the blue surrounding section smaller on mobile also so it fits nicely and is not huge as it is now.
-
That did not work… I am looking for a bigger gap in between the logo and the menu option on MOBILE not on desktop. Right now the headline is running in to everything on mobile.
-
here is the url you asked for http://theglassslipperllc.com/princess-business-events/
Thanks
www.theglassslipperllc.com
Hi there,
Thanks for posting in.
-
Please change this
@media (max-width: 480px)to this@media (max-width: 767px). Please, you’re trying to make it smaller, but you made it bigger. It’s now 80px in size, try it like 18px. -
That’s #3 right? It’s working as I checked in my mobile and if you wish to apply it for mobile (only), then add that CSS along with #1 CSS.
@media (max-width: 767px) {
.home .my-headline {
font-size: 40px !important;
}
body:not(.home) .masthead {
height:90px;
}
}
Make sure to clear your mobile browser cache.
- Please inspect your image element (your logos in single image), then add this
margin: 0 auto; display: block;to itsStyleinput field.
Hope these help.
Every thing worked except number 2. It is not making the headline small on mobile…
Hi There,
Please remove this CSS:
@media (max-width: 480px){
.home .h-custom-headline {
font-size: 80px !important;
}
}
Hi again,
It’s in your Customizer > CSS (see screenshot)
Search it in your Customizer and remove it.
Hope this helps!
Hello There,
Since you have installed a caching plugin W3 Total Cache, please clear your plugin cache first after making site changes before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.
Please let us know how it goes.
I am still not getting it to work. Is there any other way I can make the “why we are the best” section smaller on mobile?
Hello There,
Before we continue, could you please disable W3 Total Cache plugin?
Your caching plugin is creating caching issues where hinders the site changes from displaying.
For “why we are the best”, you may need to apply Responsive text and manage it in Settings > Responsive Text. To know more about responsive text, please check it from our knowledge base here:
https://community.theme.co/kb/shortcode-walkthrough-responsive-text/
http://demo.theme.co/integrity-1/shortcodes/responsive-text/
Please let us know when it is disabled.
Hi again,
You should add the following code in your Child Theme’s style.css or in your Customizer:
@media screen and (max-width: 480px) {
body.home .h-custom-headline.h3 {
font-size: 35px !important;
}
}
Adjust the font size as per your need. Hope this helps!
It worked!! thanks so much
Glad it worked.
Cheers!