Forums

Give help. Get help.

  • # September 13, 2017 at 2:50 pm

    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.

    # September 13, 2017 at 9:44 pm

    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.

    # September 13, 2017 at 11:06 pm

    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

    # September 14, 2017 at 4:06 am

    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

    # September 14, 2017 at 4:07 am

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

    # September 15, 2017 at 7:20 am

    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.

    # September 15, 2017 at 8:29 am

    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.

    # September 16, 2017 at 4:02 am

    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

    # September 17, 2017 at 3:28 am

    This is the final code

    # September 18, 2017 at 11:03 am

    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

    # September 18, 2017 at 11:03 am

    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.

Viewing 11 posts - 16 through 26 (of 26 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag