So on desktop I want 4 columns with an image above the text like the first image (so col-3), very easy. (I have the image and text in the same col)
but on mobile I want the icon appear on the left and the text on the right as per the second image.
i have tried floating the image lleft and the text right but that doesnt work I tried splitting the image and the text but they won't line up properly on all screen sizes if i do.
This feels like it should be so easy but my brain is stuck.
You can try using Flex instead of floating divs for the div that contains col class
See here an example - https://playcode.io/995433 (Try to resize the playground viewport to see the mobile layout). I hope this is what you need. I've used BS inline classes for convenience.
Bootstrap align div horizontal to vertical on responsive There is your reference
Related
I'm working on a new site. I have a layout question. We are using bootstrap 5.
Here's the layout I need:
I'm having trouble with 2 things:
1 - the burgundy testimonial box on the right. It needs to overlap the orangeish image above it. I did this by add negative top padding to the div that contains the box. This moves the box up and causes it to overlay the orangeish image. This box will contain varying text and text this is browser drawn. So I can't use an image for the tesimonial. I'm wondering if there is a better way to do this - instead of using negative padding?
2 - The "Employment" text. It is browser drawn and is in it's own div above the page content div. Again I set a negative top padding to move the Employment text up and place it over the orangeish image. I could add the text to the image but that adds an extra layer of work for any new pages that might get created. Again I'm wondering if there is a better way to do this other than negative top padding.
Grateful for any suggestions!
I want the images of my slick carousell to align in the middle vertically. Until now they get displayed only from the top which makes the slider not look good.
Here an example of how it is looking now:
It seems when I try to use flexbox it is not working.
theme: minimal mistakes
What I dont like in the image is that the buttons of the columns are not aligned
i use feature_row for showing posts on start page. I want
the preview images aligned top
the subtitles of the columns aligned with each other
the excerpt of the columns aligned with each other
the buttons aligned with each other
and it should still be responsive
How can I do that?
This is a CSS issue. You will need to modify the CSS.
The display:grid layout can do what you want. Other layouts could also work. Here is the CSS grid bible. You might like this example
I'm using CSS table to create a responsive layout and to align images horizontally. All the images will resize horizontally when I resize the screen size.
But the problem is the image on the right hand side will never align itself, if you take a look at my pen:
http://codepen.io/vincentccw/full/IlHfj/
Clearly you can still see the a very thin red line on the top right image, what made it even worst is if I resize them slowly, the whole image start to wobble.
Is there a workaround for this?
Your images are not lining up because even though you have given the cells the same width, due to the way tables are rendered (and the number of decimal places you have used) your right cell is slightly thinner than your left cell making that image slightly shorter (resulting in the red line)
You can either add vertical-align:top to your cells (to stop the wobble) or make sure that the left and right cells are going to be the same width by removing the width for the middle column: http://codepen.io/anon/pen/pzrvc
I am trying to align differently sized images in a line using the vertical-align property as well as by keeping top:50%
Now it does solve the problem partially as all the images are vertically in the middle but due to the different sizes of the images they are not aligned "like pearls on a string"
I want to somehow make images go top:50% from the centre of the image not it's border.
my simple example which uses jquery
http://jsbin.com/ekazo3