Page Builder widget and Simply Flexibility built with BlackStudio TinyMCE

[DenisK]

Good morning Bill,

I have been trying to put the same as “Simply Flexibility” widget. I use page builder then BlackStudio TinyMCE. I put two blocks then background image ( Please see attached photo ). I have my settings set to:

<div class=”fixed-background panel-row-style” style=”padding: 40px;background-image: url(http://www.wardrobeu.com/wp-content/uploads/2016/03/shopping-bags-1.jpg);background-size: cover;background-repeat: no-repeat;background-position: right center;”>

1. I tried all kinds of settings but it does not show the entire image when you scroll ( either top, center or bottom part of it). I thought maybe the original of the image was too big 1200×900 px. I went ahead and resized it to 600×450 what I did hot realize that the image gets stretched on the entire block, and when the size is small all it does is shows a low-quality image.

2. Does it have to do the image I use, or is there a way to make this picture work. I Can take other pics and try them as well.

Thank you for your great support Bill.

Attachments:

1. 

   shopping-bags.jpg
   

[Bill Robbins]

Hi Denis,

With the background set to cover, the background image will be stretched and/or cropped so that it always fills the background of the container. How close the dimensions of the background image are to the size container will determine how much cropping there will be.

If you want the entire background image to always be shown, you could switch to the contain option. It ensures that the entire background image will be displayed. It may have some letter boxing, but it will always be there.

It also make take some experimenting to get it just right. You might need to add some space to the left of the bags to make it more rectangular like that row is. Since the background is a simple gray you could just add more space there in Photoshop with that color.

Let me know how it goes,
Bill

[DenisK]

Thank you much Bill.

[Bill Robbins]

Anytime Denis

[DenisK]

I am able to do this. Is there a way to stretch the text without moving the block to the right. If I move the block then I don’t see the top of the image, if I move a block to the right then the text is not strengthed.

Maybe I can add text like a watermark in my lightroom and try it that way.

Attachments:

1. 

   Screen-Shot-2016-04-19-at-12.47.28-PM.png
   

[Bill Robbins]

You can add padding to the widget with the text in it. That will make the widget larger without actually adding more text to it. Edit the widget and look in layout. You’ll see a box there for padding.

[DenisK]

I am adding paddling and the text widget but stays the same. I must be doing smth wrong here.

[Bill Robbins]

If you’ll post the URL, I’ll take a look when I get back to my computer.

[DenisK]

Bill I will email you log in info, I can’t post URL the site is still under construction.

Thank you.

[Bill Robbins]

You can always mark replies as private and I’ll be the only one who can see them 🙂

[Bill Robbins]

Hi Denis,

I could not for the life of me get that padding to unstick. In the source code, it was set to -30px. It’s possible to have a negative margin, but not padding. I don’t know if that was what was throwing things off, but no matter what value I placed in the padding box, it would not update.

I ended up copying the text out of the widget and then deleting the row and adding it back again.

This time around in the attributes section of the widget, I added some CSS rule to set the top, left, right and bottom padding. That might be easier to fine tune as well since you really only need to add top and bottom here.

While I was troubleshooting, I did disable the W3 Total Cache in case that was what was keeping the page from changing. You probably want to leave that off until the site is ready to go live. Caching is really something you only need on the “live” site and not in development since there it slows things down.

Hope that helps out,
Bill

[DenisK]

I will work on that. Thank you very much.

[Author]

Posts