Siteorigin Image Widget Title Text

Resolved dsb0328
(@dsb0328)

6 years, 2 months ago

Hello. I am trying to figure out why, when manually making my browser window smaller, does my Title Text in my Image Widget start moving from centered to justified left. To explain a little more, my page has a row with 11 columns that contain Image Widgets. In each widget, I have an image of an icon that is set to centered and a Title text which is set to centered. I also have some css code changing the size, color and line height of the font, but even without the css, the text still pushes itself to justify left when making the window smaller. Also, the last row’s text flows off the screen. I realize I can make the font smaller with a media query, but that doesn’t solve the fact that the alignment doesn’t work. Anybody dealt with this or know a solution?

Viewing 14 replies - 1 through 14 (of 14 total)

Thread Starter dsb0328
(@dsb0328)

6 years, 2 months ago

By the way, this is when the row is set to Full Width Stretched Padded. When it is set to Full Width, the text is already automatically justified left and spilling out into the column to the right of it.

I might also add that I am adding a new page to an already developed site that did not use a page builder and I am just using it for this one page for now. The original site has almost 8000 lines of css, so I’m hoping it’s not that that’s causing the issue. A total rebuild will be in order soon, but they just want to update the homepage for now.

Plugin Support Andrew Misplon
(@misplon)

6 years, 2 months ago

Hi, please, send a link to the page concerned and let us know which part of the page to check. Thanks.

Thread Starter dsb0328
(@dsb0328)

6 years, 2 months ago

Here’s the link to the page. It’s the section below the slider with the icons above the text on top of the dark blue parallax background.

Plugin Support Andrew Misplon
(@misplon)

6 years, 2 months ago

Thanks for the link.

I’m not sure this is directly a SiteOrigin challenge, perhaps more of general CSS challenge? But will do my best to help.

I don’t immediately see the issue. The columns are much smaller than the contents so the text overflows from the columns.

Overflow: https://imgur.com/a/fCpjOcH

I don’t see any issue on mobile:

iPhone 10: https://imgur.com/a/xJDglD3
iPad: https://imgur.com/a/aY2sDms

Thread Starter dsb0328
(@dsb0328)

6 years, 2 months ago

Yes, the fonts are larger than the columns when you view the page on a smaller screen, but not on a larger screen. As you can see in your first image, the text looks justified left and lined up with the left side of the centered icon above it. On the other images, you can see that the text id centered under the icons.

Plugin Support Andrew Misplon
(@misplon)

6 years, 2 months ago

My first screenshot showing the text overflowing the columns is from my laptop which has a size/resolution of 15,4-inch (2880 x 1800).

Perhaps try changing the row layout to Full Width Stretch Padded. I’ll take a look at the alignment and advise from there.

Thread Starter dsb0328
(@dsb0328)

6 years, 2 months ago

Sorry, Thought I had changed it back after messing around with it. It is changed back now.

Plugin Support Andrew Misplon
(@misplon)

6 years, 2 months ago

No worries.

In this config the column width is 133px. Some columns like INTEGRATION TESTING will still have slightly overflowing text.

Try going to Settings > Page Builder > Layout, enable Tablet Layout. That’ll help from 1024px down. If you’d like you could increase the resolution at which the tablet layout begins.

Thread Starter dsb0328
(@dsb0328)

6 years, 2 months ago

Yeah, I did try the Tablet Layout thing. It seemed to help a little, but not perfectly because then other parts of the page would start collapsing strangely.

Plugin Support Andrew Misplon
(@misplon)

6 years, 2 months ago

One option would be to write custom breakpoints for this row using a custom CSS class, you could then make this row start collapsing before the mobile collapse point. That’s a bit beyond what we can offer within our free support scope due to resource limitations. Other options would be to make the columns with the arrows a bit narrower. You could also reduce the font size when the column overflow begins. Overall, you’re looking for the best way to make this content fit and collapse as required. I’m not quite sure of your CSS level but if you aren’t using your browser’s developer tool, it’s really helpful to see when the text is overflowing from the columns.

Thread Starter dsb0328
(@dsb0328)

6 years, 2 months ago

Okay, so these columns don’t contain whatever is in them then, correct? If not, is there a way to contain the contents of each column? Like would it be easier to do this in rich text editors or something else?

Plugin Support Andrew Misplon
(@misplon)

6 years, 2 months ago

The text is a fixed pixel size. If the text is wider than the column then it overflows. All the columns can do in that situation is to manage the overflow, either hidden or visible or add a scroll bar. As far as I’m aware, It wouldn’t make a difference adding the text via an Editor widget. The end result would be the same. Some of our widgets like the Hero offer FitText which is a JavaScript method of resizing text for mobile devices. There isn’t a widget that I’m aware of that would automatically resize the text within it to fit the container. Making the font size smaller or perhaps breaking the columns up over two rows are options that come to mind.

Thread Starter dsb0328
(@dsb0328)

6 years, 2 months ago

Okay. I’ll try a few things and let you know if I find a solution. Thanks for your help.

Plugin Support Andrew Misplon
(@misplon)

6 years, 2 months ago

For sure 🙂 Good luck.

You might also try the SiteOrigin Features widget on a test page. You wouldn’t be able to insert the arrows between each feature but it’s an option for the sort of information displayed in the row in question.

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Siteorigin Image Widget Title Text’ is closed to new replies.