I'm trying to display each image and its description on each half of the current browser screen. Here is my HTML:
<div class="container">
<div class="row">
<div class="col-6">
<img src="images/img1.jpg" alt="" />
</div>
<div class="col-6">
<p>Here is the description</p>
</div>
</div>
</div>
When I resize and reach the mobile phone viewport, the image and text are still displaying on each half of the screen. How can I make them display on top of each other, i.e: the text should be displayed right below the image on the next line?
col-6 split the screen for every viewport. You should use col-sm, col-md, col-lg or col-xl, depending on which screen size you wish to add the grid breakpoint.
You can check more informations here: https://getbootstrap.com/docs/4.1/layout/grid/
You're using bootstrap, so just use the baked in responsive utility classes;
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<img src="images/img1.jpg" alt="" />
</div>
<div class="col-12 col-md-6">
<p>Here is the description</p>
</div>
</div>
</div>
Use these breakpoints for mobile devices
#media(max-width:600px) //for mobile devices
#media(min-width:600px) //for laptop screens
Then use grid property
refer: Grid property
Related
I'm new to web development, and I'm trying to make a static responsive website.
So far, I was able to make a responsive navigation bar, but I'm stuck at how to make this layout.
This layout on mobile should look like this:
So far, I've found this code on the bootstrap website, and it resizes images depending on the browser's width.
<img src="..." class="img-fluid" alt="...">
However, I don't know how to add text near the "image". If I put "image" and "text" in the same div, the code above acts weirdly. The image doesn't resize immediately. It looks like the div's size changes and then the image's size changes depending on that.
Can anyone help me to make this layout?
I guess you have to work better with the DIVs to get the result you want. Imagine that the divs is like organizers boxes and you don't want to mess up with the things inside.
You can do something like this:
<div class="row">
<div class="col-md-6">
<img src="https://cdn.auth0.com/blog/new-bootstrap4/logo.png" class="img-fluid" alt="...">
</div>
<div class="col-md-6">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="col-md-12 bg-warning">
<p>empty text</p>
</div>
<div class="col-md-12">
<img src="https://itriangletechnolabs.com/blog/wp-content/uploads/2020/05/bootstrap-illustration.png" class="img-fluid" alt="...">
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 bg-warning">
<p>text</p>
</div>
<div class="col-md-12">
<img src="https://socpub.com/sites/default/files/images-2018/Bootstrap.jpg" class="img-fluid" alt="...">
</div>
</div>
</div>
As you can see in this fiddle: https://jsfiddle.net/xjohnatha/L34gb05r/1/ (just remember to resize the splitted window to get it responsive)
just add the bootstrap class accordingly :
total 12 columns in page so you have to divide accordingly
mobile device use class : "col-xs-6" or "col-xs-12"// according to requirement
Small device use class : "col-sm-6" or "col-sm-12"
medium device use class : "col-md-6" or "col-md-12"
large device use class : "col-lg-6" or "col-lg-12"
<div class ="col-sm-6">
<img src="" />
</div>
<div class ="col-sm-6">
//text
</div>
// for leave blank space use "col-sm-offset-6" so it will leave half container blank and element in other half.
I'm having trouble with making some of my div elements responsive.
The image with the magnifying glass is refusing to resize when the window is smaller, for example on a ipad. I have tried other methods of resizing but resulting in failure.
Website link: http://onlinestaff.net
Problem: The magnifying-glass-image on your website uses the attribute max-width:none which causes the image to be displayed in full size even on smaller screens.
Solution: When making images responsive we usually use the CSS attribute max-width:100% to ensure that big images scale down to fit on the screen (or better: fit into the parent container)
You can try something like this to make divs responsive and their position relative to the size of screen:
<body>
<div class="container">
<div class="row row-centered pos">
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
</div>
</div>
</body>
Bootstrap Grids
I'm having an problem with the Bootstrap grid system can't seam to position my content the right way that I want to. Here is what I have so far.
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-2"><img src="logo.png" alt="" class="img-responsive"/></div>
<div class="col-md-2"><h3>My Website</h3></div>
</div>
</div>
</header>
Goal
What I want to achieve is to have a full width web page for large desktops and responsive for mobiles where the logo image and the "My website" slogan will be on the left and the content will be positioned in the center.
Here are some images of what i want to achieve on desktop and mobile http://s16.postimg.org/tbt4b5det/Untitled_1.png - Desktop
http://s10.postimg.org/mbijfjvkp/Untitled_2.png - Mobile
check below what have:
<section>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="/logo.png" alt="" class="img-responsive"/>
</div>
<div class="col-md-6 col-md-offset-3"><h4>Welcome</h4></div>
<div class="col-md-6 col-md-offset-3"><h4>How are you?</h4></div>
<div class="col-md-6 col-md-offset-3">
<div class="disclaimer">
<p>Some text here</p>
</div>
<div class="link">
<span>Follow Us</span>
</div>
</div>
</div>
</div>
</section>
Other Issues
It seams every time i test for different devices or simple resize the browzer the image goes extra small until it get to sm devices and than again continues to get smaller.
Thank You
I thank you for your help i'm new in web development any suggestion is appreciated.
The way I'd do it is by changing the container class to <div class="container-fluid" style="text-align:left;"> allowing for full width usage of a screen.
Then, just put a <div style="text-align: center;"> around what you want to center.
Though this will make all elements stretch the entire screen width, including the col-*-* classes. Just add col-*-offset-* as required to adjust for this.
Your img is getting smaller because of the img-responsive class.
Hey guys I am trying to create a 50:50 ration on my split screen layout.Text on one side and picture on the other I was able to get this far.
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<div class="clearfix"></div>
<h2 class="section-heading">Trying some code:<br>Special Thanks</h2>
<p class="lead">A special thanks to the community of coders</a> for providing the help and support</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img" src="assets/img/prg.jpg">
</div>
</div>
</div>
CSS
.img {
width: auto;
height: 250px;
}
Try using Bootstrap's grid system. Here's some example HTML you could use:
<div class="row">
<div class="col-md-6">
<h2 class="section-heading">Trying some code:<br>Special Thanks</h2>
<p class="lead">A special thanks to the community of coders</a> for providing the help and support</p>
</div>
<div class="col-md-6">put your images in this section<img class="img" src="assets/img/prg.jpg"></div>
</div>
This will put the text section on the left side of the page and the responsive image on the right. If the page is collapsed so it can't fit both horizontally they will stack. You can change this if you like. For more information see Bootstrap's guide on the Grid System. http://getbootstrap.com/css/#grid
What you should use is col-xs-6 instead of col-sm-6 because col-sm-x is used for screens with min-width: 768px or higher.
You may be seeing it showing at the bottom because your using sm instead of xs and the screen resolution is below 768px.
Using Twitter Bootstrap 3, I have two colummns, one with an image and the other has text. I'm trying to place the two side by side for desktop view, but then for smaller screens (mobile,tablet) the text has to fall beneath the image. I have tried various float and positions css but unsuccessful.
Code:
<div class="row">
<h2>History</h2>
<div class="col-md-6">
<img class="img-rounded" src="img/fldry-ban.png"/>
</div>
<div class="col-md-6">
<p> text </p>
</div>
</div>
</div>
If anyone has the time to provide some details of what CSS i should be using, I would be greatly appreciated. :-)
By now you're just telling the browser: "Hey, if I am on a medium screen device (col-md-6) let's take 6 out of 12 blocks for displaying!"
You need to add the class for the mobile view too:
<div class="col-md-6 col-sm-12">
So now, the mobile browser also knows, that he should use the full 12 blocks to display.
For further information about how to use the grid system of bootstrap take a look at this.
try this
<img class="img-rounded" src="img/fldry-ban.png" style="width:100%;"/>
//or might be possible
<style>
.custom > img{
width:100%;
}
</style>
<div class="row">
<h2>History</h2>
<div class="col-md-6 col-sm-6 col-lg-6 custom">
<img class="img-rounded" src="img/fldry-ban.png"/>
</div>
<div class="col-md-6 col-sm-6 col-lg-6">
<p> text </p>
</div>
</div>