Is there any way to specify different styles for desktop, tablet and phone in regard to content widgets? In the page, linked below, there is some right-aligned content in the row immediately under the lilac bar holding the text “Immediate Danger? Call 911.” Right under that is some right aligned text content and a photo. When these widgets collapse on a phone, the text is still right-aligned, though it should really become left-aligned if it’s all to itself in its own row on a phone. How can I specify styles for content blocks such as this to be different on mobile? I know of at least one page layout system that can do this type of granularity.
Thanks for any guidance.
Hi Cakins
Thanks for reaching out.
When you edit a row, cell or widget you’ll find a Mobile Layout section below the Layout section to allow for changes in margin, padding and more, depending on what you’re editing. Adapting text alignment for different resolutions will most likely require a little Custom CSS. Please, send a link to the page you’re working on and we’ll take a look.
Oops – I forgot the link mentioned in my original post.
dev.greenecountyfamilyjusticecenter.org/
Thanks for the link.
There isn’t any method that I’m aware of to do this from within Page Builder or Widgets Bundle settings. Do you have any basic CSS knowledge?
Ah, wow, wish it was easier. Yes, I have CSS knowledge, but I’m not even having success with that yet. I thought I had found and isolated a potential element to target with this:
#panel-51-3-0-0 .textwidget p {text-align:left!important;}
But the above CSS is having no effect. I’ll have to keep poking around.
All in all I like Site Origin, but with this issue I think I have found one definite advantage to another major page builder I have used that begins with “E.” It’s drop-dead easy to set desktop, tablet and phone styles with that one. I have heard that two page builders can be used on the same site. I might try that if it gets too tedious to find and target these items w/custom CSS.
Thanks for your help.
Thanks for your feedback.
It’s much easier than you might think. (Usually, we’re only able to assist with customizations like this within our premium support scope where the budge allows it.)
Edit the Editor widget in question. Click on the Text tab. Locate:
Change that to:
You can set the class name as required. At AppearanceCustom CSS or CustomizeAdditional CSS add:
.custom-alignment { text-align: right:}@media (max-width: 680px) { .custom-alignment { text-align: left: }}Adjust the breakpoint as required.
Or you can simplify the above only use a single rule:
@media (min-width: 681px) { .custom-alignment { text-align: right: } }Untested but should work.
Thanks for the good input. I think some of the info got lost. Where it says, “Locate_ Change that to _”
All fixed up now, here on the forum, please, re-check thanks.
Wow, perfect! Thank you so much for the help. It WAS easier than I was making it.
Glad that helped. The default is most likely left so the second rule I sent should be enough on its own.
All the best with your site :)