I am creating a design for my site using a recently downloaded bootstrap
I tried with row and span12 layout the container div is not centering to my screen. I'm using 58cm LED Monitor(its not looking centered).
The DIV width is showing 1170px(Firebug) its suppose to be 940px.
Please Check my design here http://rentbbsr.com/projects/daycare/
It suppose to be like this http://rentbbsr.com/projects/daycare/daycare.jpeg
I just want the header to be fixed and centered.
There are a bunch of reasons. You have negative left margin on the row:
#media (min-width: 1200px)
.row {
margin-left: -30px;
}
}
.row {
margin-left: -20px;
}
Then you have another margin on the span:
#media (min-width: 1200px)
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 30px;
}
class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
Then your container that you centered is wider than the contents. As it is wider, it centres that element, but it has a empty area. If you set it to the width of whatever you want to center, such as the tree graphic or the menu below, it will actually be centred.
In this case i set it to the width of the top graphic:
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 988px;
}
Remember to also set it in the media query.
So in summary, your wrapper elements are wider than the contents, and you have various margins all over the place, which adjust the width even more. If you remove those and set the correct width it will center as expected.
Related
I have a container class which has following styles:
.container {
width: 90%;
max-width: 1400px;
margin: 0 auto;
}
I also have a custom carousel which has following css:
.carousel {
display: flex;
padding-left: 5vw;
}
Now, what I want is the content inside container and the content inside the carousel should start from left at the same position. The padding-left:5vw works fine until the screen size crosses 1400px.
And I can't put carousel inside container because the carousel should have full-width of the screen.
Now I need help to make a calculation for padding-left, so that it works with width: 90% and max-width: 1400px
Yiu can use media queries and when width of screen reach 1400 do something like that
#media (max-width:1400px){
.carousel{
padding-left: calc((100% - 1400px) / 2)
}
}
I have few divs on my page, which serve as a containers. Here is a sample CSS code of one of the divs:
header {
background-color: #fff;
height: 153px;
width: 97%;
min-width: 1084.06px;
margin: 15px auto;
position: absolute;
left: 0;
right: 0;
border-radius: 20px;
}
This is a centered container for my header. There are several other containers which I have styled simillar way (absolute, centered and width in %).
Problem is, when I resize the window, all these containers hit the left side of the browser window. I want to save some margin on particular window width. How can I achieve that?
P.S. If I add margin-left it breaks my center position of the div
You can use media queries, media queries are only applied on specific conditions, such as a specific width.
For example the following background-color rule won't apply for screens wider than 480px:
#media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
For more info about media queries see this w3schools page
Add another margin-right
then straighten it out depending on what you use
Not sure how to explain this but here I go:
I have 2 buttons (variable width, depending on the text inside) which are positioned next to each other (picture on top). When I make my screen smaller (picture at bottom), the buttons expand the parents width and position below each other. Is there a way to check when this happens?
I want to set a margin (so buttons don't stick to each other) and set a fixed width, ONLY when the buttons are positioned below each other, because of design reasons.
As far as I know, each browser renders a little bit different, and I also want a solution that will keep working when I decide to change the buttons text.
How would you do this? Is there a plugin or a simple jQuery script that can check this?
This is what I have so far: JSFiddle
<div class="cta-buttons-wrapper text-center">
this is button one
and button two
</div>
.cta-buttons-wrapper{ margin: 40px auto; }
.cta-buttons-wrapper .btn{ margin: 0 15px; }
.btn{
margin: auto 25px;
// ...
}
.btn-primary{
color: #fff;
background-color: lightgreen;
border-color: lightgreen;
}
.btn-primary-reversed{
color: lightgreen;
background-color: #fff;
border-color: lightgreen;
}
If you don't want to stick buttons add following css
.cta-buttons-wrapper .btn{ margin: 10px 15px; }
And for button width you need to set specific width for that using media query
#media (max-width: 767px) {
.cta-buttons-wrapper .btn
{
display:block;
width:60%;
}
}
This can be achieved without the need of a jQuery plugin, in CSS you can declare a media query for certain screen sizes and within that media query you can add different styles for the buttons that would only apply at that screen size, for example if the buttons are not displaying as you wish on mobile screen sizes you would add the below media query that would trigger at screen sizes that are 767px or less, like so:
#media (max-width: 767px) {
.cta-buttons-wrapper .btn {
display:block;
width: 100%; /* this will make the buttons span the width of the parent div */
margin: 0 0 30px 0;
}
}
I have declared width: 100%; so that the buttons span the width of the parent div on mobile only and when you add more text it will still look neat, whereas with a fixed width it does not give you that flexibility.
Here is an updated link to your fiddle with my added solution:
Fiddle
You can simply do this with CSS.
#media (max-width: 767px) {
.btn {
margin: 25px;
}
}
I have these CSS rules for my header
margin: 0 auto;
max-width: 1250px;
Having those (in comparison to not having them) causes the vertical scroll bar to appear when the browser window is < 1250px.
What CSS should I have to let users with big screens see the header att 1250px width, and the others with smaller width see the responsive header at their respective browser window size - without having the vertical scrollbar to appear?
Something like this should work:
#header {
width: 100%;
}
#media screen and (max-width: 1250px) {
#header {
width: 1250px;
}
}
What I am trying to do is, putting two divs in one line, the left div's width is fixed and the right one, gets resized when the browser is resized (achieved already). What I want to achieve is, set a resize limit for the right div, that is, the right div width decreases until the width is greater or equal to n px. after that the browser horizontal scroll.
(The reason for this is I have got a jquery tab on the right div with like 5 tabs, when I resize the browser the tabs jumps off on button of each other, hence I want to stop the right div to shrink until the last tab).
here is my code so far:
<div style="float: left; width: 300px; margin-right: 10px; ">
</div>
<div style="overflow: hidden;">
</div>
Please let me know if there is a better way of putting two div in one line (left width fixed and right resizable with limit).
Cheers,
You'll either be looking at min-width/max-width, or #media
For min-width just give a class or id to div2 and set min-width
#div2{
min-width:900px;
}
For control on different screen sizes use #media and set max/min widths.
#media only screen and (max-width: 499px) {
/* rules that only apply for canvases narrower than 500px */
}
#media only screen and (min-width: 500px) {
/* rules that only apply for canvases wider than 500px */
}
There's more information here: https://mislav.net/2010/04/targeted-css/
Try:
<div class='left'></div>
<div class='right'></div>
<styles>
.left {
float: left;
margin-right: 10px;
width: 300px;
}
.right {
float: left;
max-width: 300px;
overflow-x: auto;
}
</styles>