I have a struggle with bootstrap framework.
I want to create a simple box with image on the left side and some text and other elements on the right side. But having issue when it is displayed on small screens.
This is my current code.
<div class="col-md-8" style="margin-top: 3px;">
<div class="feed-box">
<div class="row">
<div class="col-md-1">
<img style="max-width: 52px;" src="http://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=250">
</div>
<div class="col-md-11">
<div class="row">
<p>John Doe announced something</p>
</div>
<div class="row">
<p>
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.
</p>
</div>
<div class="row">
Comment
Share
</div>
</div>
</div>
</div>
</div>
I will explain it through images:
Desktop (it's fine this padding is not important here):
Small screen (bad):
What I am trying to make (in small screens):
You need to also specify the cols for smaller screens...i.e - you don't need to put in for md
<div class = "row">
<div class = "col-sm-1">
</div>
<div class = "col-sm-11">
</div>
</div>
Use media queries to style the elements for small screen.
For example check this fiddle(resize to see the difference)
CSS used
#media (max-width: 800px){
.feed-box .col-md-1{
float:left;
margin-bottom:8px;
}
.feed-box .col-md-11{
margin-top:15px;
}
}
Related
I am using BS v5 and i ran into a small issue i have s simple two column row with image and text.
I want image to show in second column on large screen and show are first column in md & Large screen.
<div class="container">
<div class="row">
<div class="col-lg-6 order-last">
<img src="https://www.sobharealty.com/lp-properties-in-dubai/images/lp-2021/desk-img-19May2021.jpg" >
</div>
<div class="col-lg-6">
<span>FIRST COL</span>
<span>I want image on first on mobile screen i am using order-X or order-last etc feature of BS v5 but it keeps the order same it doesnt change, i read somewhere order will not change based on css on small screen based on orderclass</span>
</div>
</div>
</div>
https://codepen.io/KGuide/pen/LYWBrMy
How can i achieve this am i doing something wrong.
I tried using combination of order-last, order-first, order-x but they dont work. they keep the same order despite screen size
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-6">
<img src="https://www.sobharealty.com/lp-properties-in-dubai/images/lp-2021/desk-img-19May2021.jpg">
</div>
<div class="col-lg-6 order-md-first">
<span>FIRST One</span>
<span>I want image on first on mobile screen i am using order-X or order-last etc feature of BS v5 but it keeps the order same it doesnt change, i read somewhere order will not change based on css on small screen based on orderclass</span>
</div>
</div>
</div>
I've added order-md-first to your content div and removed order-last from your image div.
Now when the screen is bigger than de md breakpoint the content will be the first, when the screen gets smaller than de md breakpoint the image will be first
It's simply order-lg-last on the image column. You don't need order-first because that's already implied.
<div class="container">
<div class="row">
<div class="col-lg-6 order-lg-last">
<img src="https://www.sobharealty.com/lp-properties-in-dubai/images/lp-2021/desk-img-19May2021.jpg">
</div>
<div class="col-lg-6">
<span>FIRST COL</span>
<span>I want image on first on mobile screen i am using order-X or order-last etc feature of BS v5 but it keeps the order same it doesnt change, i read somewhere order will not change based on css on small screen based on orderclass</span>
</div>
</div>
</div>
Codeply
More on re-ordering columns in Bootstrap
This question already has answers here:
Responsive web design is working on desktop but not on mobile device
(4 answers)
Closed 5 years ago.
Good day,
I have a little gallery section on a web page where I make use of a css grid. it works perfectly fine on a normal web browser and when i scale it down i have managed to have it adjust as i wish using Media Queries (one image after the other), To my disappointment this didn't work when viewing on a mobile devise.
This is my first web site i have created so i expected issues. but I am now stuck on this one.
I need the images to arrange themselves below each other on a mobile browser. How would I go about this? see below html & css, the webpage is redneckrebellion.co.za if you want to see what I'm talking about or see https://codepen.io/underlight/pen/eyYLBa.
<content class="main-body">
<div class="main-content">
<div class="portfolio">
<div class="portfolio-item medium-one">
<div class="description">
<h1 class="text">Coffee Table</h1>
<p class="text">Custom Union Jack Coffee Table</p>
</div>
</div>
<div class="portfolio-item medium-two">
<div class="description">
<h1 class="text">Laser Cut Logo</h1>
<p class="text">Redneck Rebellion Laser Cut Logo</p>
</div>
</div>
<div class="portfolio-item wide-one">
<div class="description">
<h1 class="text">Custom Desk</h1>
<p class="text">Custom Desk Built To Clients Design</p>
</div>
</div>
<div class="portfolio-item tall">
<div class="description">
<h1 class="text">Container Cupboard</h1>
<p class="text">Custom Cupboard Built For Lillimex</p>
</div>
</div>
<div class="portfolio-item wide-two">
<div class="description">
<h1 class="text">Custom Shelf</h1>
<p class="text">Custom Shelf Built For Kids Car Themed Bedroom</p>
</div>
</div>
</div>
</div>
thanks!
There are many ways of doing this, and, based on your question, I'm assuming that these divs are being displayed horizontally already? Which means that they are using the display property of inline or inline-block, or, using float already. If you want to have something that will be re-usable (like Bootstrap framework), you can do something like this:
#media screen and (max-width: 480px) {
.medium-one, .medium-two .wide-one .tall .wide-two {
display:block;
}
}
Also, I would highly recommend using a library that is already made for something like this, such as Bootstrap
The simplest way is to surround your .portfolio-item with a media query like this:
#media(min-width: 500px) {
.portfolio-item {
margin: 10px;
box-shadow: 1;
display: flex;
justify-content: center;
align-items: center;
border: 5px solid white;
border-radius: 3%;
}
}
The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.
<!-- .container is main centered wrapper -->
<div class="container">
<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div>
<!-- just use a number and class 'column' or 'columns' -->
<div class="row">
<div class="two columns">Two</div>
<div class="ten columns">Ten</div>
</div>
enter code here
<!-- there are a few shorthand columns widths as well -->
<div class="row">
<div class="one-third column">1/3</div>
<div class="two-thirds column">2/3</div>
</div>
<div class="row">
<div class="one-half column">1/2</div>
<div class="one-half column">1/2</div>
</div>
</div>
<!-- Note: columns can be nested, but it's not recommended since Skeleton's grid has %-based gutters, meaning a nested grid results in variable with gutters (which can end up being *really* small on certain browser/device sizes) -->
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.
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;
}
}
Hopefully this image explains exactly what I'm trying to accomplish:
Since the blue block represents a simple list, I think it may be easier to just output the block twice, and apply a "desktop-only" and "mobile-only" class, then use that class to dictate visibility, but I was curious to know if the above is possible with pure HTML/CSS out of box for Bootstrap 3?
This should work:
<div class="row">
<div class="col-md-4">First</div>
<div class="col-md-8" id="big">Big</div>
<div class="col-md-4">Second</div>
</div>
And CSS:
#media (min-width: 769px) {
#big {
float: right;
}
}
Here is an example: http://jsfiddle.net/8r4g20cr/1/
I'm not sure if it possible but from your layout you need something like:
<div class="row">
<div class="col-md-4">
<div class="marron"></div>
<div class="blue"></div>
</div>
<div class="col-md-8">
<div class="green"></div>
</div>
</div>
When you the screen resized, the div in rows will be stacked up orderly. I don't think I can reorder it for mobile devices. Stay tune for other opinions.