Creating a responsive row - html

I'm trying to create a responsive row that, when displayed on an iPad, the 3 images go across the screen like on desktop. Currently they are behaving like they are on mobile and expanding vertically, not horizontally.
The images are the 3 product range images on the website: http://dekatest.neto.com.au/
<div class="container" style="text-align:center;">
<div class="row"><img alt="" src="/assets/images/MEDICAL-RANGE.jpg" style="max-width:100%;" /><img alt="" src="/assets/images/SPROTS-RANGE.jpg" style="max-width:100%;" /><img alt="" src="/assets/images/WELLBEING-RANGE.jpg" style="max-width:100%;" /></div>
</div>

If you are using Bootstrap try something like this
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<img alt="" src="/assets/images/MEDICAL-RANGE.jpg" />
</div>
<div class="col-sm-4">
<img alt="" src="/assets/images/SPROTS-RANGE.jpg" />
</div>
<div class="col-sm-4">
<img alt="" src="/assets/images/WELLBEING-RANGE.jpg" />
</div>
</div>
</div
and with CSS add the properties and styles to your tags
img { max-width: 100%; }
Note: you should change the value of col-sm-* depending on what you are trying to do.

if you are only using row just because of that you don't need padding between images. So simple is that make separate class for controlling padding of col-sm. You should have to use col-* inside row then it will be work fine.
CSS
.no-p{
padding-left:0px;
paddding-right:0px;
}
HTML
<div class="container text-center">
<div class="row">
<div class="col-xs-4 no-p">
<img class="img-responsive" alt="" src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" />
</div>
<div class="col-xs-4 no-p">
<img class="img-responsive" alt="" src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" />
</div>
<div class="col-xs-4 no-p">
<img class="img-responsive" alt="" src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" />
</div>
</div>
</div>
View on JsFiddle: https://jsfiddle.net/L2y3ybff/

Related

How to increase height of first row image in bootstrap

I want to design like this in bootstrap css , picture
What i have tried is
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="img1.jpg">
</div>
<div class="col-md-6">
<img class="img-responsive" src="img3.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img5.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img2.jpg">
</div>
<div class="col-md-6">
<img class="img-responsive" src="img4.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img6.jpg">
</div>
</div>
The height of images img1.jpg,img4.jpg,img5.jpg need to increase as shown in image attcahed,
Is there any Experts in CSS?
Add the .img-fluid class to each of your images so they scale with the parent div's. That should work.
https://getbootstrap.com/docs/4.0/content/images/#responsive-images
You can achieve the desired layout with modification on your html code. Try this code.
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="img1.jpg">
<br>
<img class="img-responsive" src="img2.jpg">
</div>
<div class="col-md-6">
<img class="img-responsive" src="img3.jpg">
<br>
<img class="img-responsive" src="img4.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img5.jpg">
<br>
<img class="img-responsive" src="img6.jpg">
</div>
</div>

Responsive html homepage

Was wondering if there was anyone that could help me with an issue I'm having with the responsiveness of a page that I've created for a client.
Basically I need this design to fully fit the screen (height and width) on all desktop screen sizes without a scroll bar appearing; I know I'm on the right path but cannot find the solution
Any suggestions please
Thank you
You can use bootstrap col-xs
Example:
<div class="row">
<div class="col-xs-3">
<img src="https://dummyimage.com/600x400/000/fff" alt="" width="100%">
</div>
<div class="col-xs-3">
<img src="https://dummyimage.com/600x400/000/fff" alt="" width="100%">
</div>
<div class="col-xs-3">
<img src="https://dummyimage.com/600x400/000/fff" alt="" width="100%">
</div>
<div class="col-xs-3">
<img src="https://dummyimage.com/600x400/000/fff" alt="" width="100%">
</div>
</div>
DEMO http://jsbin.com/pumiteqoji/1/edit?html,css,output

How can I align Bootstrap Columns vertically so that they are the same height?

I am trying to create a website with several images and content in columns using Bootstrap as a framework.
Is it possible to somehow make all of the columns automatically adjust to the height of the row? Here is my code:
<div class="row">
<div class="col-md-6 col-xs-12">
<img src="images/main.jpg" class="img-responsive" alt="" />
<div class="slogan">
<h1>WEBSITE TITLE.<br />SLOGAN.</h1>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="box content">
<h3>Services and Pricing</h3>
<br />
READ MORE
</div>
<img src="images/1.jpg" class="img-responsive" alt="" />
</div>
<div class="col-md-3 col-xs-6">
<img src="images/2.jpg" class="img-responsive" alt="" />
<div class="box content">
<h3>Student Discount</h3>
<br />
LEARN MORE
</div>
</div>
</div>
In the above example the two "col-md-3 col-xs-6" columns are not the same height as the "col-md-6 col-xs-12" column.
How can I make them adjust to the height of the row so that all of the content is in line?
Thanks.
You may use css flexbox to achieve same height for all the columns. So your code would be:
<div class="row heightadjust">
<div class="col-md-6 col-xs-12">
<img src="images/main.jpg" class="img-responsive" alt="" />
<div class="slogan">
<h1>WEBSITE TITLE.<br />SLOGAN.</h1>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="box content">
<h3>Services and Pricing</h3>
<br />
READ MORE
</div>
<img src="images/1.jpg" class="img-responsive" alt="" />
</div>
<div class="col-md-3 col-xs-6">
<img src="images/2.jpg" class="img-responsive" alt="" />
<div class="box content">
<h3>Student Discount</h3>
<br />
LEARN MORE
</div>
</div>
</div>
and write a custom css
.heightadjust {
display: flex;
}

displaying 3 images in a row with text underneath in bootstrap

I am trying to display 3 images in a row with a title, some text underneath the title and a button. I have tried doing this in bootstrap only to get the text moving all over the place. This seems like the only way I could get the text to stay put, but now as you can see my images are stacked on top of each other rather than next to each other. Any help would be appreciated!
<section class="part2">
<div class="container">
<div class="row">
<div class="text-center">
<img alt="" class="resize-image" id="image1" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Teach</p>
<img alt="" class="resize-image" id="image2" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Read</p>
<img alt="" class="resize-image" id="image3" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Play</p>
</div>
</div>
</div>
this is what it looks like now
i am trying to get it to look something like this
You will need to add grids to your rows. This should work
<section class="part2">
<div class="container">
<div class="row">
<div class="col-md-4">
<img alt="" class="resize-image center-block" id="image1" src="/wp-content/themes/creativeforces/images/kid2.jpg" />
<p class="text-center">Teach</p></div>
<div class="col-md-4"><img alt="" class="resize-image center-block" id="image2" src="/wp-content/themes/creativeforces/images/kid2.jpg" />
<p class="text-center">Read</p></div>
<div class="col-md-4"><img alt="" class="resize-image center-block" id="image3" src="/wp-content/themes/creativeforces/images/kid2.jpg" />
<p class="text-center">Play</p></div>
</div>
</div>
</section>
Please use this example. You need to use bootstrap grid classes like "col-md-x" where x is number from 1 to 12.
<section class="part2">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<img alt="" class="resize-image" id="image2" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Read</p>
</div>
<div class="col-md-4 text-center">
<img alt="" class="resize-image" id="image1" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Teach</p>
</div>
<div class="col-md-4 text-center">
<img alt="" class="resize-image" id="image3" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Play</p>
</div>
</div>

images overlapping on each other

I am using responsive bootstrap design.
I want to arrange images in rows and columns. But images are overlapping on each other and not sure why.
Here is my code
<div class="container">
<div class="item" style="width: 194px;height:422px;float:left">
<img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
<div class="item" style="width: 194px;height:422px;float:left">
<img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
<div class="item" style="width: 194px;height:422px;float:left">
<img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
</div>
Here is link to Fiddle
You need to limit the size of your images with max-width so they will scale with the size of the parent element.
img {max-width:100%;}
I've updated your fiddle: https://jsfiddle.net/pk1pr96n/38/
Why do you not use css?
.item {
float:left;
}
.container {
width:1050px;
}
https://jsfiddle.net/pk1pr96n/37/
you mean this?
ps. needed to increase the container div because of images size.
Your images are 350px wide, but you define the width style as 194px.
You need this.
<div class="container">
<div class="item" style="width: 350px;height:422px;float:left">
<img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
<div class="item" style="width: 350px;height:422px;float:left">
<img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
<div class="item" style="width: 350px;height:422px;float:left">
<img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
Having said that, this won't actually be responsive because you're defining the image size and not allowing it to be responsive. If you want responsive images, try something like this:
<img src="..." class="img-responsive" alt="Responsive image">
UPDATE with example:
Depending on how you want the images to lay out on mobile devices, you can put each in its own column (eg. .xs-col-4) like this:
<div class="container">
<div class="row">
<div class="item col-xs-4 col-sm-4 col-md-4 col-lg-4" style=";float:left">
<img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
<div class="item col-xs-4 col-sm-4 col-md-4 col-lg-4" style="float:left">
<img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
<div class="item col-xs-4 col-sm-4 col-md-4 col-lg-4" style="float:left">
<img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
</div>
</div>
This will make it so the three images are always side by side regardless of screen size. If you want them to stack on smaller devices, then you can adjust the col-xs-4 etc until you get the result you need.