Hi,
Working on http://tinyurl.com/y8l2a6e2, I have some questions:
On the first row:
1. I noticed, when I added the following CSS, the image “jumps” after I refreshed it. Looks like this: https://www.screencast.com/t/U21vuYPC.
.home.blog.siteorigin-panels-home .site-content, .page-template-home-panels .site-content, .page-template-full-width-no-title .site-content > .container, .page-template-default-no-title .site-content > .container, .blog .site-content .container.no-blog-title {
padding-top: 0;
padding-bottom: 0;
}I removed it, saved it, and it did the same thing.
Any idea why that is and how to stop it?
2. That row does not seem to be responsive. I’ve set the up with a 36%/64% split. Mobile looks about like: https://www.screencast.com/t/euQ2U53cxkW
How can I have it responsive or at least look better!
3. I set the text “Are you ready to experience your life in balance?” to H1, but it is not very big. What’s the best way to make that text bigger?
‘x-ray row’:
4. How can I center the x-ray image vertically?
Thank you!
Eric
Hi Eric,
1. Is this still happening? I ask as, unfortunately, I can’t seem to replicate this issue. If it is, please try clearing your browser cache to see if that helps.
2. This is basically due to the contents of the row. CSS Backgrounds must maintain the height of the container they’re applied too even if it means clipping the sides of the image off like in this instance. In other words, if the hero widget doesn’t get smaller, the image won’t be able to resize. This is a CSS feature (read: limitation) and unavoidable, you sadly have to work with it. :(
I would recommend recreating the text in that row via a SiteOrigin Headline widget with FitText enabled. This will allow for the text to be resized automatically and in turn, hopefully, reduce the overall size of the row.
If you would rather not alter the structure, please open the row that has this image applied and head over to the row syles sidebar. Open the Attributessettings group and set the Row class to home-experince_resize. Save and then please navigate to WP AdminAppearanceCustom CSS and add the following CSS:
.home-experince_resize h1, .home-experince_resize h3, .home-experince_resize p { margin-top: 0; margin-bottom: 5px; } .home-experince_resize img { margin-bottom: -15px !important; }You might also need to install the SiteOrigin CSS Editor.
3. Your best bet would be to use the SiteOrigin Headline widget as it’ll allow you to directly increase the size of the text while also dynamically resizing it so that it’s responsive. Outside of that, you should install TinyMCE Advanced and then navigate to WP AdminSettingsTinyMCE Advanced. Move the Font Size drop down to the toolbar and then save. You now have the option of choosing a different font size via a drop down.
4. Please open the row that houses this image and head over to the row styles sidebar. Open the layout settings group and set the Cell Vertical Alignment to Center.
By the way, as you’re a premium user, you’re entitled to priority email support. If you would like to make use of that, please follow the instructions found on your Page: Dashboard (please refer to the support tab). Please reference this thread and include your SiteOrigin order key in the email.
Hi Alex,
1,3,and 4 are all set, thanks for that.
For #2, on that row, in the SO Editor, I have one large text line, then that logo as a png, then another line of smaller text.
Seems the Headline Widget is best suited for one line of text.
I created a copy of the page on https://www.equilibriumspinalcare.com/home1/, and added one line of text just to see what it would look like.
Image looks better on mobile, but it overlaps the face, and I don’t see how to add the logo and last line: https://www.screencast.com/t/uFFSAUwgfa
I tried the other method as well, that didn’t seem to work.
What do you suggest?
Hi Eric,
I would recommend adding the background image to the row rather than the Headline widget. Then I would add the logo to that row via a SiteOrigin Image Widget.
Your options for preventing the text from covering certain parts of the image are limited as there’s no way to know when the text is covering a certain part of the image. Hm. Maybe you could add some mobile row padding to avoid this. Please open the row housing the Headline widget and head over to the row styles sidebar and open the Layout settings group. Set the Mobile Padding to 0 0 0 110px
Another option would be to try increasing the FitText Compressor. Please open the SiteOrigin headline widget and set the FitText Compressor to 1.25.