My issue is that I made a pretty big html page oriented on 125% browser zoom,
however when I put it in 100% all the position's and margin's start to change, thus breaking my html page awfully.
html { width: 100%; height: 280%; margin: 0; padding: 0; }
body { margin: 0 ; padding: 0; background: url(Photoshop/img/header_bg.png),url(Photoshop/img/full_bg.png); background-size: 1600px 655px,cover; background-repeat: no-repeat, no-repeat; }
header h1 { float: left; margin: 28px 0 0 220px; }
nav ul { list-style-type: none; float: right; }
nav li { float: right; margin: 53px 20px 50px 0px; text-transform: uppercase; }
What is the best way to fix the problem, without change every single piece of css code( margins position top right, e.t.c).
I have notoced you are using fixed values in your margins.
Try to use presentage, if that dont work use the #media in css to handle different sizes.
Margin example - margin-top: 10%;
Related
instead of having a margin of the right side because of the margin placed on .nav, it just covers the whole area.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--secondary);
color: var(--font-color);
background-image: url(3ca749da0b938c6392de6488c28b11c8.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
nav {
position: fixed;
display: flex;
background-color: var(--primary);
width: 100%;
margin: 5 14 5 14 ;
overflow: hidden;
padding: 7;
overflow-x:
}
Two reasons:
Your CSS is invalid. Lengths require units unless they are 0.
With a width of 100% the left margin will apply, push the element to the right, then the right-hand edge and right margin will be off-screen to the right.
You haven't provided any scale for your margins try putting:
nav {
margin: 5px 14px 5px 14px;
}
this is applying to all you haven't noticed the * *{margin: 0;padding: 0;box-sizing: border-box; }
firstly remove this and add unit like this nav{margin: 5px 14px 5px 14px;}
enter image description here
LINK: https://gta.stillwaters.io/
Can anyone help me make the entire header area height 45px? That's about 3 times the size of the font and also, decrease the logo height also. The logo and header area seems too long in height. If that entire could be reduced to 45px?
header.hidden-phone {height: 45px;}
Code above doesn't seem to work.
You have a padding on your header, the rendering engine goes outwards. it first renders the inner box with the specified height then it renders a "frame" that contains that box with the width specified on each side.
I recommend you to disable padding on this element. more information at w3 schools box model
and there is another attribute that can help Box-sizing
You have to remove the padding on #sp-header-wrapper in order to get your header to 45px.
So change this:
#sp-header-wrapper {
padding: 20px 0 !important;
}
#sp-header-wrapper {
padding: 10px 0;
}
#sp-header-wrapper {
padding: 10px 0;
background-color: #FAFAFA;
position: relative;
width: 100%;
z-index: 999;
}
#sp-main-menu ul {
list-style: none;
margin: 0;
padding: 0 0 1% 0;
}
To this:
#sp-header-wrapper {padding: 0 !important;}
#sp-header-wrapper {
background-color: #FAFAFA;
position: relative;
width: 100%;
z-index: 999;
}
#sp-main-menu ul {
list-style: none;
margin: 0;
}
Then resize your logo:
div#sp-logo {
height: inherit;
}
div.logo-wrapper {
text-align: left;
height: inherit;
padding: 3px;
}
img.image-logo {
height: 100%;
}
Here is the result:
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;
}
How do I get rid of all of this white space so everything will touch each other?
I'm building a site for a friend for free just for the exp. So yes, I know it looks novice. Here is everything:
http://jsfiddle.net/e2p3pwtb/embedded/result/
h1{
background-image: url(silver-955496_960_720.jpg);
padding-bottom: 0;
}
#mainnav{ background-image: url(silver-313347_960_720.jpg);}
body {
margin: 0;
text-align: center;
}
.sidebar1{
float:left;
width: 20%;
padding: 0 20px 0 10px;
background-image: url(silver-955496_960_720.jpg);
background-repeat: repeat-y;
height:650px;}
.main{
float: left;
width: 60%;
padding: 0 20px 0 20px;
background-image: url(silver-313347_960_720.jpg);}
.sidebar2{
float: right;
width: 20%;
padding: 0 10px 0 20px;
background-image: url(silver-955496_960_720.jpg);
background-repeat: repeat-y;
height:650px;}
/*This will keep you from having "float drops"*/
*{box-sizing: border-box;}
Some elements have margins by default. In your fiddle, add
h1, p, ul {margin:0}
http://jsfiddle.net/MrLister/e2p3pwtb/1/
Or, more thorough,
* {margin:0}
which I can't really recommend though. Things like that change the appearance too much from its natural state.
My header is not displaying with 100% width (entire width of the screen), instead it has margins: top, left, right and I did not tell it to have.
CSS:
div#header {
background-color: #FF4800;
float: top;
height: 200px;
width: 100%;
}
By Default most browsers have margins set to html elements.
Try using a css reset http://meyerweb.com/eric/tools/css/reset/
You may just need
body { margin: 0; }
body {
margin: 0;
padding: 0
}
div#header {
background-color: #FF4800;
height: 200px;
width: auto;
margin: 0;
padding: 0;
}
Output on Safari: