I use zurb and I have 1 row and 4 columns and I have 4 images inside those 4 columns.
Images are not all of the same size, so in prior to get pictures 100% sharpness, I have to give them width and height for each.
I would like to ask which class do I have to use and how, that would make my images responsive(ratio) while I am decreasing the size of my browser window, and with that, size of columns, which are responsive?
This is my code:
<div class="row">
<div class="three columns">
<img src="something.jpg" style="width:220px; height:200px;" />
</div>
<div class="three columns">
<img src="something.jpg" style="width:223px; height:190px;" />
</div>
<div class="three columns">
<img src="something.jpg" style="width:210px; height:150px;" />
</div>
<div class="three columns">
<img src="something.jpg" style="width:210px; height:195px;" />
</div>
</div>
I don't use inline CSS, it's just an example for width and height.
Thank you.
I somehow had this part commented inside .css:
/* line 45, ../../../../../../../../Library/Ruby/Gems/1.8/gems/zurb-foundation-3.0.4/stylesheets/foundation/grid.scss */
img, object, embed {
max-width: 100%;
height: auto;
}
With this my images are responsive.
Related
I would like to set a grid with a set of 3 w-50 cards in each row on desktop devices, and one card per row on smaller devices.
But, if a user responsively makes the browser window smaller, I would like the cards to stay the same width on the desktop, and have the space between them get smaller, rather than the cards themselves get narrower.
Also, is it possible to have the cards be w-50 on desktop, but w-75 on smaller devices.
Sample code:
<div class="row">
<div class="col-sm-12 col-lg-4 " >
<div class="card w-50 ">
<div class="card-header">
Featured
</div>
<div class="card-body ">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="card w-50">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4 ">
<div class="card w-50">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
Simple answer: No
If you want the cards to stay the same when user resizes the window, I don't think it's possible with .w-*, because that's relative percentage width of the whole row being 100%. The cards will shrink as user resizes the windows, unless you allow overflow on the row.
For the same reason I don't know why/how you come up with a thought that you can have 3 w-50 cards in a row on desktop devices. The maximum numbers of w-50 cards you can have in a row is just 2: 100% / 50% = 2.
To have the cards stay the same width as long as they can, you might have to use absolute units such aspx or rem.
<div class="cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
One card per row on smaller devices
There is noting you need to do here as by default <div> is set to 100% width. You might just add margins to each card to make them look nice:
.cards .card {
margin-bottom: 1rem;
}
3 cards per row on larger devices
I take larger devices as 576px and large. You can setup media breakpoints there and have .cards displayed as flexbox. And set a fixed with for the cards inside.
#media (min-width: 576px) {
.cards {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.cards .card {
width: 13rem;
}
}
https://jsfiddle.net/davidliang2008/woxsv4nm/24/
How to come up a right width?
Setting the right width of the cards is tricky though. My 2 cents: you might want to setup a right width of the cards for different breakpoints so that there won't be too much space in between cards.
What if you allow overflow?
To force the width of cards to be 50% and have 3 of them in a row, the row must be overflowed. By default, the flexbox children will shrink if there is not enough space. To enforce 50% width, you have to turn that off by setting flex-shrink: 0;:
#media (min-width: 576px) {
.cards {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.cards .card {
width: 50%;
flex-shrink: 0;
}
}
https://jsfiddle.net/davidliang2008/woxsv4nm/26/
But in this case, there is no way you still have gaps between cards.
I have a very simple set up in place, that looks like this:
<div class="row">
<div id="whoarewe" class="offset-2 col-lg-4 col-md-4 col-xs-12 col-sm-12"></div>
<div id="whatwedo" class="col-lg-4 col-md-4 cold-sm-12 col-xs12>
</div>
</div>
The thing is, in responsive mode, the id #whoarewe still has the 2 column offset, therefore is not lined up vertically with #whatwedo. Is there any way I can do this with simply a media query? or is there a bootstrap property that would take care of it in col-xs and col-sm?
I tried to set col-lg-offset-2 and col-sm-offset-0 but this didn't work :(
Thanks.
I came up with a solution that works in my case, basically using a row property called justify-content-around like so:
<div class="row justify-content-around">
<div class="col-lg-4"></div>
<div class="col-log-4></div>
</div>
<div class="row">
<div id="whoarewe" class="col-md-4 offset-md-2"></div>
<div id="whatwedo" class="col-md-4"></div>
</div>
Refer to the documentation for correct offset classes:
https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
Otherwise you can set the column width and do some flex magic by justifying content as per your need
https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
enter image description here
Here's the application interface and a part of the form is behind the side dashboard of my template
<section class="uRegion #REGION_CSS_CLASSES# clearfix" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
<div class="uRegionHeading">
<h1>#TITLE#</h1>
<span class="uButtonContainer">
#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#
</span>
</div>
<div class="uRegionContent clearfix">
width: 1360px;
height: 1002px;
right: 500px;
#BODY#
</div>
</section>
Switch to theme 42. It is possible that you're using a custom theme.
This is the ng-view area powered by angular.
You can see the text extends beyond the background image.
How can i adjust the background image size pls ?
<div class="col-xs-12 col-sm-9 col-lg-9" ng-style="{'background-image':'url(images/blue3.jpg)', 'background-repeat': 'no-repeat', 'height':'800px', 'background-size':'contain' }">
<h1> {{message}} </h1>
<div ng-view></div>
</div>
Either let it grow to it's content with height: auto; or make the overflow scroll with overflow-y: scroll;
I have started using the Foundation 3 from zurb but my slider has slides with text on the left hand side and an image on the right (instead of just an image and a label on top of it).
When I decrease the size of the browser window it all fits except that the height of the slider.
What we need is to make the slider higher when on a small browser (it needs to be the same slider - not an alternative).
I know there's the fluid option in fluid slider and I suspect that if I change it, it will be enough to solve this problem.
How do I achieve that?
The following is my slider HTML code:
<div class="row">
<div class="twelve columns">
<div id="slider">
<!-- *** This is the slider that needs to fit smaller browsers ***-->
<div class="row" style="background-color:White;">
<div class="six columns">
<h2>Title</h2>
<div class="summary">
This is the summary is the summary is the summary is the summary is the summary is the summary is the summary.
Learn more
</div>
<div class="some-thumbnails">
<img src="http://placehold.it/100x100&text=[thumbnail]" />
<img src="http://placehold.it/100x100&text=[thumbnail]" />
<img src="http://placehold.it/100x100&text=[thumbnail]" />
</div>
</div>
<div class="six columns">
<img src="http://placehold.it/550x250&text=[img 1]" />
</div>
</div>
<img src="http://placehold.it/1000x400&text=[img 1]" />
</div>
</div>
<hr />
The orbit is controlled by an image generated by some plugin used by the orbit plugin. What I did was to change the plugin to get the height of the left and right part of the highest slide (when changed to phone view) and then set the data-src to "holder.js/[width]x[height]" and call the Holder.run() method.