Responsive Design – Float a div right, then move underneath

[bhennink]

Hi Beverleyh,
I am happy with your assistance and comments.
I cleaned up a lot of the extra CSS and added a height but still I see the text hidden behind the image.

[Beverleyh]

The 150px height isn’t enough for the text to clear the img because the img is much bigger. It’s working, but you’ll need to increase it to match the actual img height in order to see the effect more clearly.

[bhennink]

Hi Beverleyh,
I increased the heigt to about the real height. And it looks more like it.:)

I tried to understand the padding here and played with the valy but then when I change the screen to check the autoresponsiveness, I see the text shift under the image.
In my ideal situation I make the image also scalable on larger screens.
Thnaks,
Bert

[Beverleyh]

Have a look into the padding-bottom % method for responsive images (you’ll need to Google)

It works on the basis that vertical padding, expressed as a percentage, is actually based on an element’s width, so if you null an element’s actual height, and instead use padding-bottom or padding-top to create a pseudo-height (using a % value), it will scale proportionally along with the width in responsive design.

Unfortunately, your image is blocked by my work filters so I can’t see it. I’ve used background colours to give the idea and basics here, but please research via Google for a better understanding https://codepen.io/anon/pen/JroaoK

[Beverleyh]

ps – you also might need to hide the overflow on the img wrapper.

[bhennink]

Hi Beverleyh,
NIice I got that merged with my CSS. You realy enlightend me here:)
Happy I joined here.

Actually it looks like I had to increase padding to 38%;) At resizing the windows there was still some overlap. Or was that solved by the overflow? I never used that.
I wonder in which situations would I get overflow issues in the image wrapper.

[Beverleyh]

I wonder in which situations would I get overflow issues in the image wrapper.

That was me just thinking out loud because I didn’t have an image to test with (I work in a school and work filters can be quite aggressive with what they block).

Using overflow:hidden; on an img wrapper can be useful if you want to change the proportions of the img. You can use it to crop parts of the image off, visually, without actually cropping anything from the real image.

[bhennink]

Found one more issue when having the wrapper with its content twice I git text and image overlap. This was duse to the height0
In the first declaration

I chaged this part to
.wrapper {
position: relative;
}
.rpic {
height: auto;
padding-bottom: 3%;
background: red;
}
I think I m beginning to understand the priciple , with thanks to Beverleyh;)
And yes I am aware of terrible blocking filters. We also have them at the office. And this site is concidered for adults only and for such reason blocked

[bhennink]

This is the final code
https://codepen.io/bhennink/pen/yzYNXO

[bhennink]

I am getting so close but still something on my whishlist.
Say I have images with two or more different aspect ratios.
How could I adapt this PEN to make the text flow around the image more dynamic and closer at for example square images like in the PEN on the bottom?

https://codepen.io/bhennink/pen/yzYNXO

[bhennink]

I am getting so close but still something on my whishlist.
Say I have images with two or more different aspect ratios.
How could I adapt this PEN to make the text flow around the image more dynamic and closer at for example square images like in the PEN on the bottom?

https://codepen.io/bhennink/pen/yzYNXO

I also tried to make the picture 60% width with center alignment I solved that with scaling the Rpic to 60% and margin left:20%
Is that the proper way?

Something strange is that when I set the backgroun for rpic:red , the red part is much larger than my image and hides the text with certain screensizes.

[Author]

Posts