I have bootstrap columns set up with photos and a brief description underneath. Because the photos are different heights the text isn't aligned across the columns and it looks pretty bad. I'm sure this is a simple fix but I just can't seem to find it! Thanks in advance
<div class="row colabs">
<div class="col-lg-6 col-12">
<h2>Megan Reitz</h2>
<img class="collab-pics" src="C:\Users\donal\OneDrive\Desktop\John Higgins Website\Images\megan-reitz.jpg" alt="">
<p class="collab-texts">Long standing research partner into 'speaking truth to power' and 'workplace activism'</p>
<a class="collab-links" href="http://www.meganreitz.com/">http://www.meganreitz.com/</a>
</div>
<div class="col-lg-6 col-12">
<h2>Mark Cole</h2>
<img class="collab-pics" src="C:\Users\donal\OneDrive\Desktop\John Higgins Website\Images\Mark-Cole.jpg" alt="">
<p class="collab-texts">Fellow explorer into the intellectual headwaters of current organizational and management practice</p>
<a class="collab-links" href="https://radicalod.org/">https://radicalod.org/</a>
</div>
</div>
enter image description here
In this you can go for any one below described solution
try to use bootstrap-5 inbuilt classes like "img-fluid"..etc
reference link :- https://getbootstrap.com/docs/5.0/content/images/
either you can set your images to one div as background and use properties like background-position, background-size .. etc
you can set apply common height/width for all image elements with this you can control images & after that texts of it..
Related
I need to eliminate the large gaps between the boxes in the left column, but I can't figure out how to do it. (see image)
I have an html template that is generating the div contents with a for-loop (row of 2 col-xs-6 columns), so I can't set static height values and float things (because the number of lines is always changing).
The code looks similar to this:
<div class="row">
<div class="col-xs-6" py:for="title, content in data">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
{ title }
</div>
</div>
<div class="col-xs-12" py:for="line in content">
{ line }
</div>
</div>
</div>
Does anyone know some css wizardry to help me out?
At this point in time bootstrap doesn't support offset grids in a pinterest-like style.
Although, you can use bootstrap in combination with something like Masonry Grid to get the effect you are looking for:
http://masonry.desandro.com/
Id use match height as it suits your question more. Here is what you do.
Download this and add to your scripts. Then add a class calldd match-height to your div columns which you want to be the same height.
https://github.com/liabru/jquery-match-height/blob/master/dist/jquery.matchHeight-min.js
$(function() {
$('.match-height').matchHeight();
});
If any issues replace $ with jQuery
I've got a 3x3 grid built with Zurb's Foundations framework and on load sometimes these boxes overlap each other. The number of image that load normally and the number that does not is completely random. Sometimes it's just one image, sometimes all of them, etc. It also happens more often when you view the website from http:// instead of locally. Just take a look at the image below.
The boxes are responsive, in such way they decrease in size when the browser gets smaller dan 1200px in width. Therefor a static height of each box isn't an option. They do remain the same ratio (4:3).
How do I make them not overlap each other?
I think the issue is the browser renders the boxes quicker than it can render each image- and therefor doesn't take the height into account.
My code for this part looks like this
<div class="row">
<div class="large-12 large-centered columns">
<div id="grid" class="row">
<figure class="small-6 medium-4 columns item" data-groups='["all", "app"]'>
<img src="images/portfolio/nos/sp-item.jpg" alt="img01"/>
<figcaption>
<h2><span>NOS</span></h2>
<p>5 maanden werken aan een nieuwe NOS app</p>
</figcaption>
</figure>
<!-- 8 more figures like the one above, each is one box -->
</div>
</div>
</div>
I think this is a classic case for a Foundation block-grid. Just change the class from large-3 to large-block-grid-3.
So your code will look like this:
<div class="row">
<div class="large-block-grid-12 large-centered columns">
<div id="grid" class="row">
<figure class="small-block-grid-6 medium-block-grid-4 columns item" data-groups='["all", "app"]'>
<img src="images/portfolio/nos/sp-item.jpg" alt="img01"/>
<figcaption>
<h2><span>NOS</span></h2>
<p>5 maanden werken aan een nieuwe NOS app</p>
</figcaption>
</figure>
<!-- 8 more figures like the one above, each is one box -->
</div>
</div>
You can learn more about Foundation block grid here
I added the .imageLoaded() jQuery plugin and configured it so that only when all images are loaded in the #grid then shuffle.js could load; a plugin that I use for shuffling/filtering the items.
Now, both on reload and clear-cache-full-reload, it works- and is showing correctly.
The problem was that if the plugin is fired before all/any of the image has been loaded, it just gives it a 10px height. Now, by firing the plugin after all images have been loaded, they get shown at their full height.
Strangely though, I applied this suggestion before I changed my grid to a block-grid, as suggested by #Asaf David, it didn't work. Now it does.
++ Credits to #Asaf David, for suggesting the block-grid, although I either can't confirm nor deny this helped. But at least it improved my code, imho.
For designs similar to this the image card used on Materialize: http://materializecss.com/components.html#
Screenshot: http://i.imgur.com/zvncUFz.png
Should I be using roles of a group or listbox for properly describing the content? I'm a tad lost reading through the aria accessibility specs.
Basic Structure:
<div class="card">
<div class="card-image">
<img src="images/sample-1.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>Card Content</p>
<a href='#'>Authors</a>
</div>
<div class="card-action">
This is a link
</div>
</div>
Side question on possibly how to deal properly addressing the links for multiple authors.
I would consider this to be a figure with a figcaption.
I would mark this up as follows(in Jade):
figure
div.card-image
img(src="", alt="If needed, any descriptive text here will be spoken by a screen reader, but will not be visible")
span.card-title Card Title
figcaption Anything within this figcaption tag will automatically be spoken by the screen reader
a.card-action(href="#") This is a link
In this case, there is no need at all to use any ARIA attributes. All that is needed is semantic markup. I hope this helps.
I'm having a very hard time assigning intelligent class names to my DOM elements.
I feel like the example below is something my CSS commonly devolves into:
<div class="article">
<div class="title-container">
<div class="title>Something fantastic</div>
<div class="sub-title-controls">
<div class="btn-like"></div>
<div class="btn-google-plus-one"></div>
<div class="btn-share"></div>
</div>
</div>
</div>
But then later I'll want to add a different style of "Share" button lower on the page. So I end up doing:
<div class="article">
<div class="title-container">
<div class="title>Something fantastic</div>
<div class="sub-title-controls">
<div class="btn-like"></div>
<div class="btn-google-plus-one"></div>
<div class="btn-share-tiny"></div>
</div>
</div>
</div>
<div>...More stuff...</div>
<div class="btn-share-big"></div>
Then things spiral out of control from there.
I guess what I'm looking for is: Is there any kind of Chicago Manual of Style for CSS? Like when is a <div> really better described as a <section> or <footer>? How do you intelligently name non-visual DIVs that serve as containers?
My CSS is a nightmare after 2 years of coding without structure. Just about given up and gone all inline on this particular project. :) Tips appreciated.
SMACCS is style guide for CSS, and might be exactly what you're looking for. You can buy it, or alternatively much of the content is available free on the site.
Additionally, BEM is a framework developed by the guys at Yandex, which I found useful reading and is used (somewhat) by InuitCSS, which I personally am keen on.
You should find some answers here, in this article titled: What Makes For a Semantic Class Name?.
In a nutshell, when you can, use the new HTML5 tags:
<header></header>
<article></article>
<aside></aside>
<footer></footer>
for your example, it would be better to do something like this :
<div class="btn-share"></div>
...
<div class="btn-share bigBtn"></div>
and only change the size in the bigBtn class.
Is it possible to prevent certain data from appearing depending on the size of the device?
For example, I'm in the process of removing a table - I'm changing it to a grid made up of <div> tags.
If the user is on a desktop, I'd like to be able to show something like this:
<div class="row show-grid" id="tblheading" naming="tblheading">
<div class="span1">Branch</div>
<div class="span1">Branch Name</div>
<div class="span1">Building</div>
<div class="span1">Building Name</div>
<div class="span1">Room</div>
<div class="span1">Asset Name</div>
</div>
<div class="row show-grid">
<div class="span1">CAN</div>
<div class="span1"></div>
<div class="span1">CAN-Building1</div>
<div class="span1"></div>
<div class="span1">CAN-Building1-Room1</div>
<div class="span1">Value 123</div>
</div>
<div class="row show-grid">
<div class="span1">CAN</div>
<div class="span1"></div>
<div class="span1">CAN-Building2</div>
<div class="span1"></div>
<div class="span1">CAN-Building2-Room1</div>
<div class="span1">Value xyz</div>
</div>
But if they're on a mobile device, I don't want to display the first "row" with the headers. If possible, I'd also like to remove some of the other fields and only show the asset name for mobile devices.
I'm just new to responsive design so I apologize for any remedial questions. If you can point me in the right direction, I'd appreciate it.
Thanks.
If you look here in the Bootstrap docs, it talks about the built-in classes for this.
You could use these classes to show and hide columns or rows based on screen size. If the differences are significant enough, you could create multiple tables and show the appropriate one for each size.
It's just a case of adding a class to the rows/ cells you'd want to hide and then having that class set to display: none in the media queries targeting mobile devices.
I think the twitter bootstrap even has such classes already built in, but can't remember the exact names.