im stuck again with "basics", anyway, I'm having trouble making this example :
Basicly I want icon and "Feature 1" to be aligned on top and centered as seen on picture (the cyan lines) and then below them a random paragraph.
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="top-align text-center">
<i class="fa fa-paper-plane-o"></i>
<h3>We're Creative</h3>
</div>
<p class="text-center">Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</body>
CSS3
.top-align{
display:inline;
}
So, my idea here was to make icon and "Feature 1" paragraph be "inline" so i made custom css and separate div tag for these 2 things (icon and paragraph), but unfortunately it wont work, here's live version if anyone is interested
http://i1cevic.com
I noticed you are using Bootstrap and Font Awesome, so my fiddle reflects that.
https://jsfiddle.net/Vuice/Ljkoatog/
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-center">
<i class="fa fa-paper-plane-o"></i>
<h3 style="display:inline;">We're Creative</h3>
</div>
<p class="text-center">Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</body>
Your wrapper div does not need display: inline. An inline element will render as if it is a letter in a word - each character is an inline element. A <span> defaults to display: inline - it takes up the next available space on the line.
Once the wrapper div.top-align has display: inline removed, give the h3 a display property of inline or inline-block. Either will do. This will allow the icon and h3 to act like two adjacent words and they will respond to the text-align: center applied by the wrapper div.
Even better, you can accomplish this without a wrapper div around the icon + h3. The icon defaults to a display of inline-block. Put that icon's span inside the h3 and it will always render as a single unit, just like the icon was a word in the h3. Since the icon is wrapped in a span, you can still target it individually if you need to.
Here's a fiddle illustrating how:
Making your icon an integral part of your heading
(I started with your code and commented out what no longer applies so you can see the progression.)
Related
This question already has answers here:
Change div order with CSS depending on device-width
(1 answer)
How can I reorder my divs using only CSS?
(27 answers)
How to change order of divs on smaller screens?
(1 answer)
Closed 3 years ago.
How can i reorder class on mobile? i want to put the title first, then the image, then paragraph and the button.
<div class="container">
<div class="row">
<div class="col-md-6">
<h3 class="pt-5">Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</p>
submit
</div>
<div class="col-md-6 col-xs-12 align-self-center">
<img src="img/duo.png" alt="image" />
</div>
</div>
</div>
Please check the image below for more details
If you are using Bootstarp 4 then you can use order class to reorder your div
for eg:
<div class="order-sm-2 order-1"></div>
<div class="order-sm-1 order-2"></div>
You can do by CSS also. Make sure you are using FLEX properties
.your_class{
order: 2;
}
.your_class1{
order: 1;
}
I'm not too familiar with bootstrap, but for non bootstrap ideas, I could think of two potential solutions one could use here. First you could add the image under the title and hide it on desktop screens and then use display: block for mobile screens using media queries.
Second, I'm not sure if you can use jquery or not, but here is a potential jquery solution using .insertAfter(). Then once you detect a mobile size, you can place that image wherever you would like. Like such:
var isMobile = 768;
if ($(window).width() <= isMobile) {
$('.duo').insertAfter('.pt-5');
}
You can test that here: http://jsfiddle.net/3buty5oL/1/
$(function(){
if($(window).width() < 767){//first check the device width
$(".image img").insertAfter(".pt-5");//move the image after title
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3 class="pt-5">Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</p>
submit
</div>
<div class="col-md-6 col-xs-12 align-self-center image">
<img src="https://picsum.photos/200/300" alt="image" />
</div>
</div>
</div>
it can be done using juery in two steps
1. check for device width.
2. if its mobile then move the image next to title.
Normally you can use bootstrap4 order classes to recorder the elements on the screen. But based on the structure (i.e., on Desktop you kind of have 2 columns but on Mobile you have 1 vertical column where Image sits in between Title and Paragraph), it is not so easy to just use order classes to achieve the desired result.
I think the best way to achieve the result is to put the Image on 2 places and show/hide one of them based on the screen width.
HTML
<div class="container">
<div class="row">
<div class="text-center col-md-6 text-md-left">
<h4>Title</h4>
<img class="img-fluid d-md-none" src="..." />
<p>
Paragraph. Lorem ipsum dolor sit amet, consectetur
adipiscing elit
</p>
More
</div>
<div class="col-md-6">
<img class="img-fluid d-none d-md-block" src="... />
</div>
</div>
</div>
On mobile, the image on the right column is not showing due to d-none:
On desktop, the image on the right column is showing due to d-md-block, but the image between the Title and Paragraph is not showing due to d-md-none:
fiddle: http://jsfiddle.net/aq9Laaew/235510/
My code is this:
<div class="padding5">
<div id="div1" class="float_left wh50"></div>
<div id="div2" class="float_left h50">Long text goes right here, Lorem Ipsum Dolor Sit Amet.Long text goes right here, Lorem Ipsum Dolor Sit Amet.Long text goes right here, Lorem Ipsum Dolor Sit Amet.Long text goes right here, Lorem Ipsum Dolor Sit Amet.</div>
<div id="div3" class="float_right wh50"></div>
<div id="div4" class="float_right wh50"></div>
<div class="clear"></div>
</div>
And my CSS is this:
<style>
.padding5{padding:5px;}
.wh50{width:50px;height:50px;}
.h50{height:50px;}
.float_left{float:left;}
.float_right{float:right;}
</style>
Now if I resize my window (and make it smaller) I want the content from div id=2 to break words to a new row but is not. Is keep pushing the other elements behind.
Remove the height from the .wh50 class. Or set it to min-height: 50px;. The height declaration is causing div3 and div4 to appear like they're not being cleared.
.padding5{padding:5px;}
.wh50{width:50px;height:50px;}
.h50{min-height:50px;}
.float_left{float:left;}
.float_right{float:right;}
i have paragraphs with text and a div what say something like "more" like this:
<div>
<p>
Lorem ipsum dolor sit ametm.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
</p>
<div class="extra">more</div>
</div>
I need to place the extra div right behind the end of the last word in the paragraph, on the same line.
like this: this is the end of p - more
It seems to be easy to do this with a p:after selector but i cant use this because i need to work with the "extra" div in jquery.
And I need to have the paragraph using display or display-inline.
Do somebody has a tip?
thanks alot!
edit: I need to have the extra-div next to - not wrapped in - the p
thats is the problem
and i tried to use span and inside-block but without any luck
Try this:
<div>
<p>Lorem ipsum dolor sit ametm.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
<span class="extra">more</span>
</p>
</div>
Can you use display: inline-block on the div?
That lets the element have width, height (and other box properties like padding), but behave like a character in a paragraph when it comes to positioning.
Oh also, you probably have to place the div within the last paragraph since otherwise, the paragraph will push it down - the paragraph has its own box in the page.
i cant wrap the span inside the p because the p is coming from a wordpress loop.
at the end i used jquery to append the span at the end of the last p.
$(document).ready(function() {
$('.extra_available p:last-of-type').append(' <span class="extra"> extra </span>');
});
thanks alot!
I'm using Bootstrap 3.
On large screens I want to have a sidebar on the left and the maincontent on the right. On small screens I want to have important blocks of the sidebar on top, then the maincontent, then the less important blocks of the sidebar. Is there a way to achieve that?
Here's a JS Bin showing the problem: http://jsbin.com/wibucopi/1/ and below is the current code (which, however, displays all sidebar content on top on small screens).
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="upper" style="background:red">
<h3>I want to be <b>above</b> the main content on small screens!</h3>
</div>
<div class="lower" style="background:green">
<h3>I want to be <b>below</b> the main content on small screens!</h3>
</div>
</div>
<div class="col-sm-9">
<h1>Main content</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
I've already played around with col-sm-pull/push-x, but I could only achieve that the whole sidebar is displayed below the maincontent on small screens.
I don't want to duplicate content and show / hide it with visible-XY, hidden-XY, as the page would get bigger and it feels just wrong.
It would be great to have a pure Bootstrap css solution, or at least a css only one (I wouldn't like to use js).
You could do something like this:
Bootply Demo
HTML:
<div class="container-fluid">
<div class="row">
<div class="upper col-sm-3" style="background:red">
<h3>I want to be <b>above</b> the main content on small screens!</h3>
</div>
<div class="col-sm-9 col-sm-pull-right">
<h1>Main content</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="lower col-sm-3" style="background:green">
<h3>I want to be <b>below</b> the main content on small screens!</h3>
</div>
</div>
</div>
CSS:
#media (min-width: 768px) {
.col-sm-pull-right {
float: right;
}
}
.lower {
clear: left;
}
When I add the 36px "Announcement" text to the <div> below, it adds a ton of padding around just the text that is 36px and I cannot get rid of it. I did some research and tried changing the padding of the <div> and the <body> in my stylesheet, but that did not get rid of the padding. Can somebody please explain how to remove the excess padding that is around just the 36px text?
<div style="float:right; width:697px; height:90px; position:relative; top:-50px;">
<p style="text-align:center; font-size:36px;">Announcements</p>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget.</p>
</div>
Try to explicitely set the line-height CSS attribute, also make sure you set margin to 0.