https://codepen.io/makamo66/pen/LEEjxZx
When I view my codepen on my iphone 14, the photo and text aren’t side by side. The text is underneath the photo. I want the photo to float to the left and the text to flow to the side of the text. A better example is my web page Project Potluck Bios which responses nicely in my browser but stacks the photo on top of the text on my iphone 14.
I applied h-50 to the image and now the text flows around the floated image. I wish there was something like h-sm-50 and h-xs-50 so that I could change the image size for small viewports only. Now I just have to edit my web page and see if that works.
One of my thumbnail images on my website is very small and for h-50 it becomes much smaller than the other images. So I put in width: 150px instead of width:auto in the img tag but now the h-50 command doesn’t render as 50%.
I added the very small thumbnail image to my codepen so you can see that it’s too small when I use width: auto and the bootstrap class h-50. I have to use the same code for all of the images and I don’t know which Bootstrap class to use to make all of the images the same size while showing up side by side when the viewport is smaller.
I applied min-vw-25 to my images and now they’re a nice size but unfortunately the first image lies above the text for small viewports and doesn’t stretch out to the entire div. There’s a gap to the right side of the image which looks bad. The second image has the image stacked above the text for small viewports but I accept that as a solution because the image as well as the text are stretched out across the entire div and it doesn’t look bad.
My website Project Potluck Bios still doesn’t look good on my iphone and the codepen doesn’t look good on my iPhone either. I’ve tried everything and I’ve run out of ideas.
were you trying to float the text to one side of the images?
Have you tried to ues the float-*-start properties from bootstrap?
ref: https://getbootstrap.com/docs/5.0/utilities/float/https://getbootstrap.com/docs/5.0/utilities/float/
Thanks, hbar1st I am using float-start. I used d-flex align-items-sm-stretch align-items-xs-stretch for the images and changed it back to vw-100 so that the image is stacked above the text for small viewports now and it doesn’t look half bad on the iphone that way.
I just tried to implement the above for my website but I couldn’t use vw-100 for my website because the images became too large in comparison to the text to the right of them so I used vw-50 but then the images didn’t stretch across the div and stack on top of the texts when the viewport was made smaller like they did for my codepen.
I fixed the codepen so that the image is on top of the text as I wanted but after second thought, I decided that wasn’t a good solition after all because the thumbnail images get too wide and blurry. So now I’m going to make a new codepen where the image is floated to the left and the text is floated to the right.
I changed my layout so that the text floats to the side for small viewports but the image is still too big and has low-resolution. I am accepting this as the solution. https://codepen.io/makamo66/pen/ZYYoOPx