I'm following a tutorial about responsive design and when trying to set the float property to none for a media query targeting (max-width: 625px) for a section having a class main as in the following rule-sets :
/* Section main */
section.main {
background-color: blue;
width: :100%;
float: none;
text-align: left;
}
section.main aside div.content {
background-color: green;
margin: 8px 20px 8px 0;
padding: 5px 0px 10px 85px;
background-size: 50px 50px;
background-position: 20px 5px;
}
Here is the full html and css code all together: jsfiddle (I added colors of blue to the section.main and the green color to the section.main aside div.content in these same media query rule-sets to make sure they do have effect on the html and to make it easy to be located in the page.
These three green divs are supposed to be stacked vertically when the float is set to none.
here: JSfiddle i've edited your fiddle and came up with this. hope this sample helps.
section.main aside {
float: none;
display: block;
width: 100%;
}
section.main aside div.content {
background-color: green;
margin: 8px 20px 8px 20px;
padding:20px 15px;
text-align: center;
background-size: 50px 50px;
background-position: 20px 5px;
}
Related
I am new to HTML and CSS so I am doing a online course, I don't understand what went wrong here and I cannot find it in my course.
My footer is smaller then it used to, it was as big as my header and I want it as big as my header. When I added all the .post code, it went wrong. When I edit my .post max-width my footer width is also adjusted. Please help me :)
.container {
max-width: 1000px;
margin: 0 auto;
}
#footer {
background-color: #2f2f2f;
padding: 50px 0;
}
.column {
min-width: 300px;
display: inline-block;
vertical-align: top;
}
#footer h4 {
color: white;
text-transform: uppercase;
letter-spacing: 0.1em
}
#footer p {
color: white;
.post {
max-width: 1000px;
margin: 0 auto;
padding: 60px 0;
Take a look at http://crashjapan.net - in the sidebar, the Subscribe button (submit element) is staying inside its box, nicely centered, but the three buttons under "I want to help!" (link elements styled like buttons) are too wide. I have looked through the CSS but I can't figure out what is different and what to do to fix it. Can someone else spot the problem?
#secondary .widget .button {
color: white;
font-size: 1.2em;
margin: 0 10% 5px 10%;
width: 80%;
text-align: center;
box-sizing: border-box;
}
This is one possible solution.
Remove this:
margin: 0 10% 5px 10%;
from this in your style.css:
#secondary .widget .button {
color: white;
font-size: 1.2em;
margin: 0 10% 5px 10%;
width: 80%;
text-align: center;
}
Edit Your class:
#secondary .widget .button {
clear: both;
color: white;
font-size: 1.2em;
margin: auto;
text-align: center;
width: 78%;
}
Change your button #secondary .widget .button
to this:
secondary .widget .button
{
color: #FFF;
font-size: 1.2em;
margin: 6px 0% 0px -5px !important;
margin-top: 0px;
margin-right: 0%;
margin-bottom: 0px;
margin-left: 0px;
width: 70%;
}
6px will leave some space between those buttons.
width 70% will be also play a role for the margin.
You can try to play the width a bit to see how it looks like.
i'm starting with responsive design and i'm having the next issue:
when i rezise my div, in a design of two column and the right one is going down.
Ex before rezise:
and after rezise:
I dont jnow why is going down f the design is in %. Maybe somebody can help'me, here the css code that i'm using.
* { margin: 0px; padding: 0px; }
h1 {font: bold 20px verdana, sans-serif; }
h2 {font: bold 14px verdana, sans-serif; }
header, section, footer, aside, nav, article, figure, figcaption, hgroup { display: block; }
body { width: 100%; text-align: center; }
#envoltura { margin: 15px auto; text-align: left; padding: 0px 2% 0px 2%}
#cabecera { background: #FFFBB9; border: 1px solid #999999; padding: 20px; text-align: center; }
#menu { background: #CCCCCC; padding: 5px 15px; text-align: center; }
#menu li { display: inline-block; list-style: none; padding: 5px; font: bold 14px verdana, sans-serif; }
#seccion { float: left; width: 65%; margin: 20px 0px 0px 0px; border: 2px solid #999999; padding: 2%; text-align: center; }
#lateral { float: left; width: 26.4%; margin: 20px 0px 0px 0px; padding: 2%; background: #CCCCCC; border: 2px solid #999999; text-align: center; }
#pie { clear: both; text-align: center; padding: 20px; border-top: 2px solid #999999; }
Because you haven't allowed enough room for the two columns at that window size!
► Declare different layout per media queries:
(method below based on a min and max screen resolution range)
#media only screen and (min-width: 480px) and (max-width: 979px) {
/* Your styles for between these two resolutions here */
}
OR! depending on what you want to do, complete end goal, you may not even need to use media queries
► Define width of each columns in a percentage relevant to either the browser, or a wrapper div.
#wrapper {
position: relative; // the below is relative to this
margin: 0 auto; // center
max-width: 1024px; // max size of container
width: 100%; // 100% between min and max ;)
min-width: 960px; // lowest toggle point
}
.left {
width: 80%; // 80% of above
float:left;
min-width: 500px; // add a min-width to declare stopping point
}
.right {
width: 20%; // 20% of above
float:right;
min-width: 100px; // add a min-width to declare stopping point
}
It is because your divs are equaling more than 100% of your parent try this and edit it as you see fit
If you post your html I can explain it furthur
set your body to an absolute value example body{width:1200px} then set your first media query to #media screen and (max-width: 1199px){body{width: 100%}} This way you know that anything over 1199px the page will break
I have been stuck with this div in the header wrapping to the next line when the window is resized. You can view it at http://www.commexfx.com . The right div in the header which includes the search box etc is wrapped to the next line when resizing the window. I tried everything: changing position, display, white-space, etc, but nothing. the structure is like this:
<div id="header">
<div id="logo"> </div>
<div class="top-widget"></div>
</div>
And the CSS code for the time being is:
#header {
margin: 0 auto;
/* max-width: 960px; */
width: 960px !important;
height: 100px !important;
border: 1px solid blue;
background-color: #ffffff;
white-space: nowrap !important;
}
#logo {
float: left;
z-index: 9999999;
margin-bottom: 20px;
width: 360px;
display: inline;
border:1px solid green;
padding: 0 !important;
margin: 0 !important;
}
.top-widget {
background: none;
border: none;
/*clear: right;*/
float: right;
height: 95px;
text-align: right;
display: inline;
width: 590px !important;
border: 1px solid yellow;
padding: 0 !important;
margin: 0 !important;
}
Would appreciate any help. Also searched the forums here and tried every possible solution I could find but nothing.
Thanks
Add min-width:960px to your css #header declaration.
Replace your css with these new ones. Floating two elements, one right and one left will make them wrap so I would use inline-block.
You don't need position:relative unless you are positioning elements within that div as absolute so you can remove those as well. Same with z-index.
Also, you don't need !important unless you have other styles overriding this. I try and use it sparingly.
#header {
margin:0 auto;
width:960px;
}
#logo {
margin-bottom: 20px;
width: 360px;
display: inline-block;
}
#logo img {
vertical-align: inherit;
}
.top-widget {
text-align: right;
width: 570px;
display: inline-block;
}
I'm still new in CSS, sorry for the long post. I have the following code
<style type="text/css">
.btn {
float: left;
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
}
.btn a{
float: left;
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }
.btn_checkout { background-color: red; }
</style>
</head>
<body>
<div class="btn btn_addtocart">Add to Cart<span></span></div>
<div class="btn btn_checkout">Check Out<span></span></div>
</body>
</html>
I'm trying to center each button in the middle of the page (horizontal alignment), how can I accomplish that? I tried playing with the padding and the margin but it messes my background image.
Here is jsFiddle
try margin auto, text-align center, fixed width for middle part..
oh ..and get rid of the float, and dont forget the ';'
edit code..
.btn {
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
display: block;
margin: 5px auto;
text-align: center;
width: 120px;
}
.btn a {
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }
.btn_checkout { background-color: red; }
You can text-align:center the links inside the divs (which are block-level elements) to center them inside their containers but you will have to make a couple of tweaks. Try this:
.btn {
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
text-align:center;
}
.btn a {
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
display: block;
}
.btn_addtocart a { background-color: green; }
.btn_checkout a { background-color: red; }
Demo
http://jsfiddle.net/andresilich/UtXYY/1/
A couple things you can do
.btn {
display: block
margin-left: auto;
margin-right: auto;
}
By default a button is an inline element, so margins will no work. Setting display to block, will make it act like a
div.btnParent {
text-align:center
}
The other method is to have the button's containing element text-align center. The may not necessarily always work, as there may be more content in this container that you do not want to be centered.
I can't fully see from your code snippet but to centre somthing in the middle of its parent, you need to set its margin to auto.
margin: auto
and its width
width: 100px:
EDIT:
Also remove any float: styles you have on the element.