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
Related
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
I have a bootstrap container with an img inside. I'd expect the left side of the image to align
with the LHS of the container. Looking through the CSS with the browser debugger doesn't show any margin, border, etc that seems to be responsible. Playing with position and align doesn't fix this issue.
I can force it by styling the img with "margin-left:-15px".
I'd really like to know why this isn't working as I'd expect and where does the 15 pixel magic number come from.
Thanks,
Joe
#joe McGuckin. The magic number comes from the bootstrap template css file. Here is the snapshot from Bootstrap.min file.
Bootstrap is a frame work which provides some built in elements to make a page responsive. Please refer to the bootstrap documentation for guidance.
I'm hoping for some help, I have a static navbar along with some buttons on the right, and I have a VERY large table that the users are going to interact with.
The users are most familar with an Excel like view where there is a ribbon (my navbar) on top and the table is scrolled horizontal and vertically as necessary.
I've got the table to fill the page and have the bootstrap static navbar to show however the navbar is overlapping the table headers.
Is there an easy way to fix this overlap?
Here is bootstrap playground link detailing what I currently have.
https://www.bootply.com/iGX9K2KF9a
Sure, give the .table-wrapper a margin-top:50px and that will move it down. Since the navbar is fixed, it's taken out of the flow of the page so the relatively positioned .table-wrapper is still being placed based off the top of the page.
Ok so i am trying to create a 3 column layout with css and html on Expression web and when i view it in a browser my left panel div column overlaps my heading div column and my right panel div column overlaps the header also.Plus theirs a lot of white space between my main content column and my right panel column. Its no white space in between the layout when its minimized but it still overlaps.please help
I'm not sure what your specific problem is without seeing your code. I find the best way to learn CSS is by example. so, I'd suggest looking through these.
(I haven't looked to see if these are using the latest design standards)
http://layouts.ironmyers.com
Or my favorite layout.
http://alistapart.com/article/holygrail
I have some pictures I am using on my website. I am trying to reduce the http requests. In my header I have my logo floated left and then another picture with special offers etc floated to the right in the same div. My question how do I combine these together and still work out the amount of space I need between them as I am using a fluid layout.
Would you also advise combining the main background image with these logos etc and if yes how do i do this so it still looks correct in a a fluid layout