header problem

Justoverclock

i know that i'm bad, but i have problem with my header:
https://codepen.io/justoverclockl/pen/bGBzxOE

when i scroll the page, this happen:

🙂

hrvoje_hr

You shoud remove position:fixed; on .line

Justoverclock

hrvoje_hr if i remove that the orange line is not at the top, how can i fix that?

hrvoje_hr

Justoverclock the best would be to use position: absolute;

Anonymous43

Justoverclock Not to be rude or anything, a suggestion. Have whatever it is you trying to add to your site, Implement it ON IT. Not in some box. This way, people can adjust your css based on your existing forum css. It all plays a big part.

Justoverclock

Anonymous43 i know, but i can't leave a website with an error, i need to create a staging website when i have some free time

Justoverclock

anyway now works, but is not responsive for mobile (as u can try, is live)

i try to add this:

@media screen and (max-width: 600px) {
  .slogan {
  font-family: 'Mukta', sans-serif;
  margin: auto;
  width: 200px;
  padding: 0px;
  text-align: center;
  color: #2d3748;
  padding: 0.1px 0px 0px 0px; /*to make it exactly to the center*/
  float: none;
    
  }
}

but not work properly, the text is not centered and not responsive

Anonymous43

Works fine on both for me now

Justoverclock

Anonymous43 thats what i see on mobile (iphone)

Anonymous43

Did you clear your browser cache? Ok , I see now.

Justoverclock

Anonymous43 done right now, but still remain like the photo

Anonymous43

try

width: 430px;

or 100%, base on your like

Justoverclock

Anonymous43 un mean on media query max width?

done but not work

Anonymous43

In here:

slogan {
    font-family: 'Mukta',sans-serif;
    margin: auto;
    width: 450px;
    padding: 0px;
    text-align: center;
    color: #2d3748;
    padding: .1px 0px 0px 0px;
    float: none;

change 450px to 430px, or 100%

Justoverclock

Anonymous43 done but no result

Anonymous43

remove padding and width completely

Justoverclock

Anonymous43 done, but no effect

Anonymous43

did you remove width too? Remove the width

Justoverclock

Anonymous43 now i have this code:

@media screen 
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
  .slogan {
  font-family: 'Mukta', sans-serif;
  margin: auto;
  text-align: center;
  color: #2d3748;
  float: none;
    
  }
}

.line {
   width:100%;
   height: 7px;
   margin: 0;
   padding: 0;
   background-color:#fc6b03;
   position:absolute;
   top:0;
   left:0;
}
section {
    height: 290px;
    background-color: #F7F9F9;
}
div.logo{
margin: 0 auto;
width: 250px;
}
.logo {
    width: auto;
    height: auto;
    float: none;
    padding: 22.5px 0px 0px 0px; /*to make it exactly to the center*/
}
.slogan {
  font-family: 'Mukta', sans-serif;
  margin: auto;
  width: 430px;
  padding: 0px;
  text-align: center;
  color: #2d3748;
  padding: 0.1px 0px 0px 0px; /*to make it exactly to the center*/
  float: none;
}

#containerbtn {
  text-align: center;
}

.myButton {
	box-shadow:inset 0px 3px 0px 0px #e7752e;
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	background-color:#ffffff;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:17px 27px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	background-color:#f6f6f6;
}
.myButton:active {
	position:relative;
	top:1px;
}

davwheat

Justoverclock min-device-width

Unrelated, but you shouldn't use device-width, you should just use width. 😉

Anonymous43

.slogan {
font-family: 'Mukta', sans-serif;
margin: auto;
width: 430px; <---- Remove this
padding: 0px;
text-align: center;
color: #2d3748;
padding: 0.1px 0px 0px 0px; /to make it exactly to the center/
float: none;

Justoverclock

Anonymous43 if i remove that, the text change on desktop too, not only in mobile