Image resize to fill the container 100%

Hi Team,

Please help with positioning.

I have one rows and two columns (50/50), one displays a image and the other is text.
The text conatiner is leading.

The text container is identified as #pgc 76-3-1 .panel-grid-cell 732.5px x749px
The image container is identified as #pgc 76-3-0 .panel-grid-cell 732.5px x699px

I resized the image so it is 850x750 yet when I insert the image in the tiny mce div, it ends up smaller than the div and a border remains.

What should i do to fill the full container?

website = www.jullo.nl

Thank you in advance

I also tried this:

#pgc 76-3-0 .panel-grid-cell {
width: 100%;
margin: auto;
}

But it doesnt seem to affect the area.

Hi,

If you want to remove the border of the image ( padding ), please try this Custom CSS:

#pgc-76-3-0 .so-panel.widget {
    padding: 0 !important;
}

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba,

Thank you for the fast response, it is almost good. It only dosent cover from top to bottom. Is there a way to do that?

cheers

To follow up my last post, it seems even when i adjust th padding of the .so-panel-widget Which removes any borders the panel-grid-cell size of the left container (with the image) is not the same size as the panel-grid-size in the right container.

Effect is that the one looks smaller than the other. I would like it to be equal and full stretch (the image that is).

Hi,

How I see now you have modified it, so the mage is even smaller, to have the same amount you have to make the left area 50% and right area 50%, so then it will be equal, it wasn’t equal, because the image had padding.

Best Regards,
Csaba

Thanks, I tried it but not yet.

If i change the row to 50%-50% it still hasnt the right visual effect. I will let it stay so you can see for yourself. The problem is that there is still space to the left of the image and i guess a couple of pixels below the image.

The goal is to understand how to strech te image so it covers the 100% of the container, from top to bottom and from left to right.

If needed i can can send you an image made in ppt. ?

As always thanks for the amazing support!

Hi,

In width the image now takes 50% of the screen, I have inspected it, visual it really doesn’t seem to take the 50% , but it’s taking, at last for me on a 15" MacBook Pro Retina, I have inspected both sides and bot takes 720px, so 720px x 2 is 1440px ( native size of the 15" MBP ), so that means the image is actually takes the 50% of the screen, what you can still fix is to have it more aligned and to remove the space on the bottom of it, for this fix you can use this Custom CSS:

.panel-grid-cell p {
    margin: 0 !important;
}

.so-panel.widget {
    padding: 30px 30px;
}

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba,

I tried it but unfortunatly it didnt work.I also not sure if .panel-grid-cell § is correct so i tried it also without the p and it also didnt work.

I would expect it should work since it sounds logical, that no margin no padding should cover it, but the little bar below and a little bit space on the left remains.

I left this:
#pgc-76-4-0 .panel-grid-cell {
margin: 0 !important;
}

#pgc-76-4-0 .so-panel.widget {
padding: 0 !important;
}

Any other ideas?

btw the image doesnt have to be this big it may have a different size… and the column may be different like 30% - 70% as long as the image fills the container for 100%

regards

Hi,

Yes it works, please try it like this:

.panel-grid-cell p {
    margin: 0 !important;
}

.so-panel.widget {
    padding: 30px 30px !important;
}

the second one doesn’t worked without “!important” maybe that was the issue, the “.panel-grid-cell p” have just a tiny space ( “p” have a 10px bottom margin, but I have added the panel-grid-cell class, to don’t remove the paragraphs margin-bottom on the entire site, but only under panel-grid-cell ), so please use it as is, because it have to work to remove the space under the image.

Best Regards,
Csaba

Ok i tried the suggested code (Even without the page indication) and left it so you can see the effect.

unfortunatly the image doenst cover the container for 100% now I see white space arround the image.

Hello there,

Could you please try the following?

#pgc-76-4-0 .so-panel.widget{
  padding: 0 !important;
}

Let me know how it goes.

Warmest regards,
Kharis

Hi Kharis,

I tried it and unfortunatly it dosen’t work (not completly) On the left and on the bottom there is white space left.

So still looking for a sollution if anybody knows a different trick please feel free to post.

Hi,

Do you mean the white space below the image? or where? Because the white space below the image have to be resolved with the Custom CSS I gave you in my last post.

Best Regards,
Csaba

Yes below the image and also to the left of the image. The custom css code you provided did not solve the issue unfortunatly. I replied to your last post. With your code i had a white border on all sides of the image. Top, bottom, left and right. So still looking for a sollution…

Hi,

Can you please post a screenshot how it looks for you now? and how it looks if you add my Custom CSS? So I can check for a solution.

Best Regards,
Csaba

Hi Csaba,

They code is like you suggest I made to screenshots but how should I post it in this Forum? I uploadded the screenshot to my wordpress media and tried the button [IMG] but im not sure if this is correct way.

Is there a email I could send it to?

my email is info@jullo.nl

THX

Ok, the image pop up after posting. I added red arrows to show what i mean. I would like the image the strech to full 100%. this is how I added the code:

Hi,

Please replace this:

.so-panel.widget {
    padding: 30px 30px !important;
}

with this:

.so-panel.widget {
    padding: 0 !important;
}

and also add padding-left to this:

#pgc-76-4-1 {
    width: 49.994%;
}

so it have to look like this:

#pgc-76-4-1 {
    width: 49.994%;
    padding-left: 30px !important;
}

Please let me know how it works then.

Best Regards,
Csaba

Hi Csaba, Thanks for all the help!

We finally did it. In the end the code above still left a little bit white space to the left, so I tried to resize the columns. Instead of 50% - 50% it is now 40%-60% with the following code:

.panel-grid-cell p {
margin: 0 !important;
}

.so-panel.widget {
padding: 0 !important;
}

#pgc-76-4-0 {
margin-left: 0px;
}

#pgc-76-4-1 {
padding-left: 50px !important;
padding-right: 50px !important;
padding-bottom: 30px !important;
}

Now it looks like It should and therefor I thank you for the great support!!!

case closed :slight_smile: