Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi,
My site is https://www.roxyshomeservices.ca
I am having 2 issues with the hero widget.
1. I am trying to align the button in the center. It works to align it to the left or right in custom css, but I can’t get it to center align.
2. I am trying to have the text resized for the main body when it is viewed on a mobile device, so the text isn’t so large on a mobile screen. I tried the following in custom css:
@media (max-width: 810px){
panel-5-0-0-0 p {
font-size: 12pt !important;
}
panel-5-0-0-0 h1 {
font-size: 20pt !important;
}
}
But nothing happened.
It would be great if you could help me resolve these two issues!
Thank you very much
Avery
Hi Avery
Thanks for reaching out.
Once you’ve inserted your
[buttons]shortcode into the content area, the easiest is to use the Visual tab to highlight the shortcode and then click the center text button as you would to center normal text.In the Design and Layout section of the Hero widget ensure that Enable FitText is enabled. That’ll ensure your heading tags dynamically resize for mobile devices.
Hi,
Unfortunately the center text button has no response for the button. It displays it in the middle in the visual tab but has no effect on the actual webpage. The center text button works for the actual text I have, but not the button.
I have had fittext enabled and but it doesn’t scale down my text size on mobile. The text still fits to the screen but I would like to have it a smaller font size on a smaller screen so it’s easier to read. The text isn’t designated with a header tag, only as a paragraph .
Thanks!
Thanks for the update.
FitText only applies to headings.
If the CSS posted in your initial question is accurate, it wouldn’t function as there is neither a class period or an ID hash before each rule, I’m not sure if you’re targetting a class or an ID. Ideally, use your own custom classes when writing CSS for Page Builder. Please, see my guide Post: A Custom CSS Guide to Page Builder Row, Cell & Widget Attributes.
Please, send a link to the page and we’ll take a look at why the button centering isn’t working.
roxyshomeservices.ca
If you switch over to the Text tab after center aligning the buttons shortcode, this is what you should see:
If my div class for the text box is homepage-cta_box, would it work to do:
@media (max-width: 810px){
.homepage-cta_box p {
font-size: 12pt !important;
}
Thanks for the help
[buttons]
Is what I see when I center align the button (doesn’t appear center aligned)
Thanks for the update, it’s easy to change the shortcode to the shortcode wrapped in a p tag which I inserted above.
I, unfortunately, can’t really dive into Custom CSS within our free support scope. It’s really quick to test your CSS to see if it’s working. The rule you’ve pasted above is missing a closing bracket.
<![buttons]>
Sorry I’m not sure how to post the code without it auto displaying as [buttons]
Have you wrapped your shortcode in a paragraph with a center-aligned inline style rule?
Be sure to view this on the forum and not via email.
Awesome the center alignment worked! Thank you very much.
Have a wonderful Christmas
For sure, you too :) All the best.