I am currently building a responsive site and I am trying to solve an issue I have run into.
In peoples biographies we have a chunk of text and then a group of links to their social profiles.
What I am trying to achieve is to have the buttons float to the top right, with the bio text wrapped around the div on a large layout and then at a certain point clear the buttons below the text.
I’ve made two pens for the 2 states:
Any ideas how to achieve this?
Edit: hm, the below might work but it’s actually not so straightforward as i thought. Would need one of the divs go from display:block to display:float as it goes into mobile mode.
I would suggest putting the div with the class “buttons” inside a container div, then floating it to the top right. In the container div you can place your text there.
The container div’s width would be set to 100%.
You would also need to include another container (i’ve called it primarycontainer) and set that width to something also.
It would require 3 divs total.
<div class=”primary container”>
Chunk of text
I’m not sure that would do the trick.
I am assuming you are talking about floating both the internal divs for larger screens and then display block from smaller screens?
This wouldn’t allow for the text to wrap around the div.buttons I don’t think?
I will try to provide some code like what I have now:)
I think I need to strip down the css and html a bit.
I am brand new here at this forum. found it when I searched for text wraping around an image and make image move underneath on small screens.
I would like that on a website I am rebuiling my website using flexbox.
The CSS and HTML are quite some lines so I am looking for ways to present a trimmed version of my code to demonstrate what I have now
The initial part of the main page looks like https://codepen.io/bhennink/pen/jGEqEq
And the image moving below the text works fine. But I do not get larger text parts wrapping around the image
But I do not get larger text parts wrapping around the image
That’s because the .blok1 img wrapper is a flex child, so it can’t have the text in the .blok4 wrapper (an adjacent sibling, also a flex child in the same flex context) wrap around it.
With or without flexbox it wouldn’t work.
.blok1 would need to be inside .blok4, just like in CrocoDillon’s demo https://codepen.io/CrocoDillon/pen/kmGCw
Thanks for your help.
I think I tried that also before like https://codepen.io/CrocoDillon/pen/kmGCw
Where I have put the blok1 wrapper inside blok4. Is this wat you explain?
When I tried that, it puts the image always below the text.
Maybe I just do not understand everything what is written. Englisch is a foreign language for me :S
I also tried combining with what cocodillondid but then The text and image overlap. See https://codepen.io/bhennink/pen/boNezj
The :before pseudo element needs height to “exist” and clear the float/img. You can do that by setting either an explicit height on it (e.g. 150px, as per CrocoDillon’s demo), or setting
padding-bottom as a %, which creates height without actually defining it outright, and keeps sizing fluid. Try 35%.
Unfortunately I’m unable to do much other than give you a verbal explanation and sizing guesses because I’m on mobile, and there’s too much superfluous CSS in your pen to make it easy for me to use. Sorry.
You must be logged in to reply to this topic.