I have a container that I'm setting to be absolutely positioned on a page because I want it to float over the background content. The problem is that the container is not 100% of the width of the screen. As a result, even though the col widths are appropriate and the content is in fact centered in the row, it appears totally off.
Any thoughts?
View code:
<div class="container home-marketing">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 jumbotron-marketing-wrapper">
<p class="jumbotron-marketing">Rent the gear you need to get outside</p>
<p class="jumbotron-marketing">We deliver & pickup even last minute requests</p>
<p class="jumbotron-marketing">Save money, save time, save space</p>
</div>
</div>
</div>
CSS code:
/* NOTE adding width: 100% does NOT help */
#media only screen and (min-width : 320px) {
.home-marketing {
position: absolute;
padding-top: 65%;
}
}
#media only screen and (min-width : 768px){
.home-marketing {
position: absolute;
padding-top: 20%;
}
}
#media only screen and (min-width : 961px){
.home-marketing {
position: absolute;
padding-top:27%;
}
}
Rendered HTML
You can see that the home-marketing container is different because the computed width is 646.661926269531px, but for the navbar for example, the computed width is 970px
Why you are adding class container to absolute element?
.home-marketing{
width:100%;
}
<div class="home-marketing">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 jumbotron-marketing-wrapper">
<p class="jumbotron-marketing">Rent the gear you need to get outside</p>
<p class="jumbotron-marketing">We deliver & pickup even last minute requests</p>
<p class="jumbotron-marketing">Save money, save time, save space</p>
</div>
</div>
</div>
Related
I have the following in my Bootstrap layout,
<div class="row mt-4" id="content">
<div class="col owl-carousel">
<div class="slide text-center">
<div class="innerslide">
<h1>Registered In Total So Far</h1>
<p class="split-para align-middle">Total: <span id="total-registered"></span></p>
<p class="split-para align-middle">Durban: <span id="durban-registered"></span></p>
<p class="split-para align-middle">Pietermaritzburg: <span id="pmb-registered"></span></p>
</div>
</div>
<div class="slide text-center">
<div class="innerslide">
<h1>Registered In Last Hour</h1>
<p class="split-para">Total: <span>409</span></p>
<p class="split-para">Durban: <span>345</span></p>
<p class="split-para">Pietermaritzburg: <span>74</span></p>
</div>
</div>
</div>
</div>
What I am trying to achieve is set the mt-4 margin-top row to 0, once the screen is between a certain width. The problem I am having is when the page is viewed in landscape mode on certain size tablets or phones it is pushing the content to far down because I am using a fixed-bottom class for the footer row.
What I would like to do is remove that margin if the screen is in portrait mode and at that width. Using Responsinator, if I am understanding correctly. It is happening when the landscape width is between 667px and 736px.
This is basically what I am trying to achieve:
I have tried with the following code but it does not seem to make a difference:
#media (min-width: 650px) and (max-width: 768px) {
#content {
margin-top: 0;
}
}
I hope this makes sense and would be glad to give further information if required.
Thank you.
EDIT: The solution just posting the correct code here in case it helps someone else. Thank you for the help!
#media screen and (orientation: landscape) {
#content {
margin-top: 0 !important;
}
}
How can I forbid at col-xl-* that it stops growing for bigger monitors?
When I view it on my laptop (1280 width) and on the desktop (1920), both applys to col-xl but it's either too big on the desktop or too small on the laptop.
<div class="d-flex justify-content-center align-items-center text-center login-div ">
<div class="col-md-6 col-sm-8 col-lg-5 col-xl-3 col-10 rounded-10 mask"></div>
</div>
Thanks.
One option is to use media queries and define a max-width, probably for Bootstrap's xl breakpoint:
#media (min-width: 1200px) { /* xl */
.your-class {
background: yellow;
max-width: 200px;
}
}
<div class="your-class">Hello</div>
Using the above code, elements with class .your-class will have a maximum width of 200px if the viewport width is at least 1200px.
I have been trying to get an image to float left of some paragraph text, then when the resolution reaches below 500px, the image becomes responsive and fills the top (width 100%) and the text is fully below.
The code I have does this:
It works on higher resolutions, but with smaller displays, the text in the blue oval gets very small.
I am using Bootstrap.
How do I achieve the effect I am after?
Thanks
#arttopcont:before {
content: ' ';
display: table;
min-width: 767px;
}
#artimg{
float: left;
width: 300px;
padding-right: 20px;
}
<div id="arttopcont">
<div id="artimg">
<img src="image1.png" />
</div>
text here
text here
text here
text here
text here
text here
text here
text here
text here
</div>
If you're using Bootstrap you can use the various sizing column classes to make sections bigger/smaller at different screen sizes col-{xs, sm, md, lg}-#.
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<div id="artimg">
<img src="image1.png" />
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
text
</div>
</div>
</div>
Update (without Bootstrap classes):
If I understand correctly, you are looking to have the image be full width with text underneath it at screen sizes less than 500px. You can achieve this using media queries.
#media (max-width: 500px) {
#artimg {
width: 100%;
display: block;
float: none;
}
}
Hopefully that helps!
I got bootstrap col-md-1 that contains an image inside. Moreover, that column is wrapped by content div with paddings.
The problem I'm not okay with is that this image is pretty small. I would like it to be with the size at least as the original one has,
yet it should be responsive.
How can I do this? Thanks in advance!
My Codepen
HTML
<div class="content">
<div class="row">
<div class="col-md-11 first-column"></div>
<div class="col-md-1 back-to-blog">
<a href="/">
<img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
</a>
</div>
</div>
</div>
</div>
CSS
.content {
padding: 0 35px;
}
.first-column {
border: 1px solid;
height: 100px;
}
One of the 'blanket' styles that BootStrap ships with is this:
img {
max-width: 100%;
}
This essentially means that images won't go wider than their parent containers / elements. So if your col-md-1 has a width of 97.5px (assuming you're using a normal 1170px container?), your image won't be bigger than 97.5px on viewports > 992px.
Try experimenting with different sized columns:
<div class="col-md-10 first-column"></div>
<div class="col-md-2 back-to-blog">
<a href="/">
<img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
</a>
</div>
Or, for larger viewports, try appending another class to your wrapping container and overrides BootStrap's native container class:
<div class="container container-custom">
Then style is as follows:
#media (min-width: 1420px) {
.container.container-custom {
width: 1390px
}
}
Doing this will ensure your column widths remain proportionate to your container size (they are percentage based after all) and most importantly, you're not overwriting BootStrap!
You'll also notice I've wrapped the above class in a media query. This is so viewports > 1420px have the 1390px container with spacing either side (due to container's margin-left: auto and margin-right: auto which center it in the viewport).
so confused at the moment I am trying to place a social icon below a h3 tag that is in the same bootstrap row however having a nightmare doing it.
I am trying to create this effect:
However I cant seem to get those icons below the phone number element when they are in the same row, they just sit on the same line.
The logo is also in the same row as the phone number element so if I created another row and placed the icons in that row they appear to far down the page.
Here is an example of my code:
HTML
<div class="container hidden-sm hidden-xs">
<div class="row">
<div class="brand col-md-6 col-sm-6"><img src="media/img/logo.png" alt="Driven Car Sales" class="img-rounded logo-custom"></div>
<div class="phone-div col-md-6 col-sm-6">
<h3 class="phone-number"><i class="glyphicon glyphicon-phone"></i> 01429 7654287</h3>
<img src="media/img/facebook-icon.png" alt="Facebook" class="facebook-icon">
</div>
</div>
</div>
CSS
.phone-number {
color: #fff;
margin-top: 20px;
display: inline-block;
font: 600 2em 'Open Sans', sans-serif;
float: right;
}
.facebook-icon {
display: block;
height: 30px;
float: right;
}
/* main logo */
.logo-custom {
height: 75px;
}
#media only screen and (max-width : 1199px) {
.logo-custom {
height: 61px;
}
}
Any tips on what I might be able to do to create this effect?
Thanks, Nick :)
Try this Code:
<div class="container hidden-sm hidden-xs">
<div class="row">
<div class="brand col-md-6 col-sm-6"><img src="media/img/logo.png" alt="Driven Car Sales" class="img-rounded logo-custom"></div>
<div class="phone-div col-md-6 col-sm-6">
<div class="col-md-12 col-sm-12">
<h3 class="phone-number"><i class="glyphicon glyphicon-phone"></i>01429 7654287</h3>
</div>
<div class="col-md-12 col-sm-12">
<img src="media/img/facebook-icon.png" alt="Facebook" class="facebook-icon">
</div>
</div>
</div>
</div>
Hope this may useful
I think you might be just over-complicating things in your own mind. Forget about Bootstrap for a minute, if you wanted to just make a page that has two elements stacked one on top of the other, then you'd make sure to use block elements (which means that they will take up 100% the width of the container they are in by default).
The thing is that your custom css is actually overriding this normal behavior because you are expressly setting the phone number to be display: inline-block; and making both elements use float:right. Just remove those from your css rules and you'll get your desired effect:
.phone-number {
color: #fff;
margin-top: 20px;
font: 600 2em sans-serif;
}
.facebook-icon {
display: block;
height: 30px;
}
If you want the items to align to the right, just add the Bootstrap helper class: text-right to the column div or add text-align: right to your css rules.
EDIT: Just a suggestion
Also, you can streamline your markup. If you want the entire container to be hidden on sm and xs devices, then all you have to have in your col classes is col-md-6. And, if you didn't want your container to be hidden at the xs and sm breakpoints, then all you would need is col-sm-6, because that alone would set the columns to be 50% for ALL viewports that are larger than 767px. Remember, col classes are additive. When you add a col class, it's like saying: "make this column this width from this viewport size and up until I tell you otherwise".