Hello guys,
I really love the SiteOrigin builder and the Widgets Bundle as well.
It’s not an easy task to add new features but also keep it simple and user-friendly.
I’ve read several threads about the same issue I have, but couldn’t find a solution. I need to add the image title over the Image Widget. I’ve tried to use the Visual Editor or Text Widget, but it’s cropping the image too much on mobile devices. So I would like to use the Image Widget that keeps the proportions and just scale. And I need to add the title over it in the middle. I’ve tried following CSS, but it didn’t work. I’m I making any mistake there?
I believe that adding text over a simple image and have a possibility to customize it (at least basic features) might be very useful for many users.
Many thanks for any advice.
.page-id-2436 .so-widget-sow-image h3 {
text-align: center !important;
color: #000000 !important;
font-weight: 800 !important;
font-size: 60px !important;
}
.page-id-2436 .panel-grid-cell .widget-title {margin-top: -300px !important;
}
Maria
Hi Mária,
Do you have a public URL where I can take a look at what you currently have? This will allow me to work out why the CSS isn’t working.
Hi Alex, of course
http://www.king-gates.com/become-our-distribution-partner/
Thanks
Hi Mária,
Is that the correct page? I ask as the page id of that page is 2463 which is different to the id used in the CSS (2436) – if this isn’t intentional, I would recommend changing them over to the correct id. If it is, can you please add a widget title for one of the images so I can inspect the resulting CSS?
Noooo way, can I be so stupid. Unfortunately the reply is yes.
I think I controlled it like thousand times.
OK, the code works, but I still have to move the title to the center of the image, which was the aim of this game. Any idea what to add to the code?
Hi Mária,
Oh well. Don’t beat yourself up about it mate – mistakes happen.
Add:
.page-id-2463 .so-widget-sow-image { position: relative; } .page-id-2463 .so-widget-sow-image h3.widget-title { position: absolute; top: 32%; line-height: 75px; }Just note that this isn’t at all responsive. I would recommend either disabling it or resizing the text on mobile devices.
To clarify, have you thought about using the Hero Widget? It’ll allow you to directly add text on top of the image. If you can’t find the SiteOrigin Hero widget, please navigate to WP AdminPluginsSiteOrigin Widgets and activate the Hero image.
Hi Alex,
thanks. The last final tuning, when the position is absolute, the title alignment is not in the center. Can we do something with that?
I’ve tried the Hero widget as well as Visual Editor or Text Widget with a background image, but it’s cropping the image too much on mobile devices (being responsive) so it cuts out basically all the products that are not in the center of the picture.
I added three new rows with Hero widgets just to show you what I mean. The first one is with a background image in the Hero widget, but no height established for that widget and it’s being cut from above and below.
The second one is with a Hero widget background image and fix height inserted directly to the widget settings (no CSS)
but it’s being cropped too much on mobile devices, so the products disappear.
And the third one is with no image in the Hero widget and background row image. No CSS, no height and the same issue.
I’ve also tried playing around with Visual Editor and Text widget reading other similar threads, but couldn’t find a solution that would work for me.
I think many users might have the same problem. It’s difficult to choose a picture that looks good on all types of devices and passes the message (unless it’s just a background picture that can be cropped).
Cheers,
Hi Mária,
Adjust the top amount to get your desired placement. There’s no easy way to automatically set it up to be vertically aligned at this time.
Regarding the hero. In hindsight, I should have realized this was going to be a problem when I saw how wide your image is. To clarify, there’s no way to have that image be responsive when it’s a background image (CSS has weird (unavoidable) requirements that prevent it – HTML-based images don’t have this requirement). Sorry about that!
Hi Alex,
Yes, I know, that’s why it might be an interesting feature for your widgets bundle for the future.
Adjusting the top amount would help me to move it more up or down, but I need to move the title to the center of the image horizontally speaking, which means to the right.
I tried this, but it didn’t work:
.page-id-2463 .so-widget-sow-image h3.widget-title {
text-align: center !important;
Is it because the position is absolute?
Thanks,
Hi Mária,
Oh, sorry, I misread your reply – sorry about that. Please replace:
.page-id-2463 .so-widget-sow-image h3.widget-title { text-align: center!important; color: #000!important; font-weight: 800!important; font-size: 90px!important; position: absolute; top: 32%; line-height: 75px; }With:
.page-id-2463 .so-widget-sow-image h3.widget-title { text-align: center!important; color: #000!important; font-weight: 800!important; font-size: 90px!important; position: absolute; top: 32%; line-height: 75px; padding: 0; }How does that look?
Hi Alex, I added padding as you recommended, but it’s still not working.
Any other idea?
Hi Mári,
Try:
.page-id-2463 .so-widget-sow-image h3.widget-title { text-align: center!important; color: #000!important; font-weight: 800!important; font-size: 90px!important; position: absolute; top: 32%; line-height: 75px; padding: 0; right: 0; left: 0; }Thank you, thank you, thank you, thank you and one more time thank you Alex. You’re the best.
It works perfectly now :)
I’ll only have to set the size for mobile screens and that’s it.
OK, it seems, I’ll never finish this task.
Am I doing something wrong?
@media screen and (max-width: 320px) {
.so-widget-sow-image h3.widget-title {
font-size: 30px !important;
top: 30%;}
}
Hi Alex, I just solved it. Thank you one more time for your help. If anybody is reading this thread, I used this:
@media screen and (max-width: 980px) {
.so-widget-sow-image h3.widget-title {
font-size: 30px !important;
top: 32%!important;
line-height: 35px !important;
font-weight: 700 !important;
right: 5px !important;
left: 5px !important;}
}
@media screen and (max-width: 414px) {
.so-widget-sow-image h3.widget-title {
font-size: 25px !important;
top: 30%!important;
line-height: 30px !important;
font-weight: 700 !important;
right: 5px !important;
left: 5px !important;}
}
@media screen and (max-width: 320px) {
.so-widget-sow-image h3.widget-title {
font-size: 19px !important;
top: 25%!important;
line-height: 30px !important;
font-weight: 700 !important;
right: 5px !important;
left: 5px !important;}
}