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.
Related
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
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.
I'm just dabbling into CSS and HTML. At the moment I have an a <article> inside that column should have two items, a picture on the left, and article information on the right(header, and paragraph). It appears okay when the screen is enlarge but if the screen shrinks the image and the text shrinks. Instead of shrinking I'm looking for the image to retain it's size and the text to drop below the image.
http://codepen.io/anon/pen/Yygdjv
<div class="container-fluid">
<div class="row">
<aside class="col-sm-1">
</aside>
<section class="col-sm-7">
<article>
<div class="row">
<aside class="col-xs-6">
<img src="http://i0.wp.com/www.sooziq.com/wp-content/uploads/2015/11/32.jpg?resize=270%2C200"/>
</aside>
<aside class="col-xs-6">
<div id="DIV___5">
<span id="SPAN___6"> Basketball</span>
<h2 id="H2___8">
What really Matters
</h2>
<span id="SPAN___10">November 12, 2015</span>
<p id="P___11">
Make sure you load up on the fluids and snacks and use the washroom because these are the top 3 things to watch for in basketball! Read More
</p>
</div>
</aside>
</div>
</article>
</section>
</div>
</div>
This is a twitter bootstrap 3 question. You can achieve this be changing your col-xs-6 to col-sm-6 or col-md-6 for both columns. After the sm or md breakpoint (whichever you go with), it will make the two columns full width and the image will naturally be on top. You can be more explicit with class="col-xs-12 col-sm-6" for both columns, but it's not really necessary.
Fork of your demo: http://codepen.io/anon/pen/GpezRL
You Can Also Use #media rule(optional) like-
#media (max-width:580px)
{
.col-xs-6 {
width: 50%;
clear: both;
}
}
I designed a page with the help of bootstrap, with 2 image icons is it.
<div class="container">
<div class="text-center vcenter"><label class="Title">Page title</label></div>
<div class="span7 center" style="height:100%; padding-top:5%">
<div style="float:left; text-align:center;"><img src="images/image1.png" class="img-responsive"></img><label class="iconText">Icon Text1</label> </div>
<div style="float:right; text-align:center;"><img src="images/image2.png" class="img-responsive"></img><label class="iconText">Icon Text2</label> </div>
</div>
</div>
CSS:
body {
background: url('images/3D/landing.jpg') no-repeat center center fixed;
}
I need to align these two images one below another on vertical orientation of mobile device and on the same line on horizontal orientation.
Thanks.
Use bootstraps grid system to do the hard-work for you. http://getbootstrap.com/css/#grid
Adding col-md-6 to your div class means that your divs will start stacked on top of each other on mobile and tablet devices, then becomes horizontal on desktop. Read up on the grid-system in bootstrap.
<div class="col-md-6" style="float:left; text-align:center;"><img src="images/image1.png" class="img-responsive"></img><label class="iconText">Icon Text1</label></div>
<div class="col-md-6" style="float:right; text-align:center;"><img src="images/image2.png" class="img-responsive"></img><label class="iconText">Icon Text2</label> </div>
Let me know if you need any more help.
p.s. I kept your inline-styling but try using external stylesheets so that your html doesn't get so messy
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>