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;
}
}
Related
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
I have a responsive layout where the sidebar drop below the content in mobile.
In full width the list of items in the sidebar are at 100% width. So its like one item in one row...
In mobile I want 2 items in 1 row... by setting the width of each item to 50%. Not sure where I am going wrong...
DEMO: http://jsfiddle.net/nN6Zt/
#item {width:100%;background:#eeefff;}
#list_item{display:block;min-height:60px;border:1px solid #333}
#media only screen and (min-width:480px) and (max-width: 768px)
{
#item {width:50%;}
h1 {font-size:180%;line-height:120%;}
}
You have given 50% width to item, give it to list-item
Working Demo : http://jsfiddle.net/surjithctly/nN6Zt/2/
#item {width:100%;
background:#eeefff;
float:left;
}
#list_item {
width: 49%;
float: left;
}
49% to avoid breakage.
Or you can use box-sizing:border-box; as Tom mentioned.
#list_item {
width: 50%;
float: left;
box-sizing:border-box;
}
You have assigned the css for div but a doesn't have any css assigned to it....since your end child element is a a tag, its more semantic to assign a styling to it for all media queries use!
amend this s to your css for #media only screen and (min-width:480px) and (max-width: 768px) {} (or whichever was required to bring in the effects)
#item > a#list_item {
display:inline-block;
width:48%; /* to avoid any clash for breaking */
}
demo
since the hype is Responsive Web Design, and I already know how to write it, I am just here to clarify a few questions of my own before I keep doing something wrong if I am.
If we set a divs style like so:
div {
width:200px;
height:200px;
background: #000;
margin: 10px 5px;
}
Now to be responsive the way we want would we do-
div {
background:#000
}
#media screen and(max-width:1200px) {
div {
width:300px;
height:300px;
margin: 20px 5px;//Question is here
}
}
#media screen and(max-width:720px) {
div {
width:300px;
height:300px;
margin: 20px 5px;//question is here
}
}
#media screen and(max-width:360px) {
div {
width:200px;
height:200px;
margin: 10px 5px;
}
}
The question is in face if we set the margin or any style that is going to be the same for an for greater width or minimum width do we keep assigning it do can we leave it at that? So if we set the margin at 20px 5px will that stay with it until 1200px? And the same goes for reverse will it stay the same until it gets to 360px and then change?
It's just a question that has been bothering me.
The max-width:1200px media query will apply to all sizes below, meaning that you won't need to re-apply the same values again in the 720px one.
In comparison:
#media screen and (max-width:1200px) {
/* applies to all viewports below 1201px */
}
#media screen (min-width:721px) and (max-width:1200px) {
/* only applies to viewports above 720px and below 1201px */
}
In conclusion, seeing as the values in your second (720px) media query rule is the same as the bigger one, they are applied twice (not necessary).
i think use percentage value to margin and width. You can avoid the resizing problem
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.
After starting work for a new company, I've been charged with building a new site for them. This is what I've got so far:
http://ghostevolution.com/ghostds/
The problem is that it isn't working correctly on the iPad - the header background colour doesn't stretch across the full width of the screen like it is meant to - this is also true of the mid-section light-grey background colour on pages such as http://ghostevolution.com/ghostds/?page_id=160
Does anyone know why this is? Thank you.
The half-assed proper way to do this is to wrap your contents in a container that spans 100% of the screen width. For example:
CSS
.wrapper {
display: block;
width: 100%;
padding: 10px 0; /* add some top + bottom padding */
background-color: #252525;
}
.aligner {
display: block;
width: 960px;
margin: 0 auto;
}
.container {
display: inline-block;
}
HTML
<div class="wrapper">
<div class="aligner">
<div class="container">
// stuff
</div><!-- /container -->
</div><!-- /aligner -->
</div><!-- /wrapper -->
It's not the prettiest, but it allows you to throw 100% width background-colors on any section, and works in < IE8. You can do whatever you need to within div.container (float, position, etc) and it will expand the .wrapper element (thus expanding your background color).
Each div.wrapper should be treated as a "section" - 'header', 'feature', 'content', 'footer', etc...
Another alternative is to start using #media queries, which would allow you to essentially plug in code for specific screen widths (880/1024px for iPad, portrait/landscape).
#media screen and (max-width: 880px) {
.my_element {
/* attributes */
}
}
This is due to issue that is often forgotten (in desktop browsers as well). I'm pretty sure..
You see, with any desktop browser. Change the width of the window less than your wrapper width and scroll to the right. That would show the page as cut off.
This can be fixed quite easily.
removed csspivot site since its no longer running
The basic idea is to add the same background that gets cut off into element that has fixed width since browser can't do anything to that.
Add CSS:
#auxiliary .wrap {
background-color: #bbb; /* Same as the #auxiliary bg color*/
}
#branding .wrap {
border-top: 6px #92C201 solid; /* Same as #branding border and bg and height*/
background-color: #333;
height: 60px;
margin-top: -6px; /* I wouldnt necessarily use this to get it to top but works as well. */
}