Jump to content

CSS coders: Can you correct the header?


SDS

Recommended Posts

When trying to make the message board look similar to the front-page, I had this error where the white boxes didn't lineup that I never fixed. Is there some one who wants to dive into this for us?

 

I'd prefer not to make any template/html changes (adding divs, etc...). I'm hoping for a css only solution. Thanks.

Screen Shot 2018-06-04 at 10.26.04 AM.png

  • Like (+1) 1
Link to comment
Share on other sites

Ah, I see, it only reproduces with smaller screen widths.

 

I get fairly reasonable behavior if I set padding to 0px and max-width to 1340px on ipsLayout_header and ipsLayout_footer, but it is a slightly different look.  CSS is maddening to me (I'm a C++ dev) so maybe someone else has a better solution.

Link to comment
Share on other sites

I think there is an issue with bottom and top section's padding/margin. 

 

5 min hack job but it is a start....

 

@media screen  and (max-width: 1490px) and (min-width: 1077px) {
  #ipsLayout_header {
    margin-left: 15px;
    margin-right: 15px;
   }
}

Edited by spudz000
Link to comment
Share on other sites

Looks like the problem is with the header having a max-width setting and body not having that same max-width setting. And the body container has some padding on it as well. Here's the fix:

 

.ipsLayout_container {

max-width: 1310px;

padding: 0px;

}

 

Looks fine on chrome now.

Edited by Wayne Cubed
  • Thank you (+1) 1
Link to comment
Share on other sites

43 minutes ago, Wayne Cubed said:

Looks like the problem is with the header having a max-width setting and body not having that same max-width setting. And the body container has some padding on it as well. Here's the fix:

 

.ipsLayout_container {

max-width: 1310px;

padding: 0px;

}

 

Looks fine on chrome now.

I was just going to suggest this.

  • Sad 1
  • Haha (+1) 3
Link to comment
Share on other sites

1 hour ago, Wayne Cubed said:

Looks like the problem is with the header having a max-width setting and body not having that same max-width setting. And the body container has some padding on it as well. Here's the fix:

 

.ipsLayout_container {

max-width: 1310px;

padding: 0px;

}

 

Looks fine on chrome now.

 

 I guess I passively suggested that there should be a blue border along the outside like the front page. I should’ve said so explicitly. 

Link to comment
Share on other sites

34 minutes ago, SDS said:

 

 I guess I passively suggested that there should be a blue border along the outside like the front page. I should’ve said so explicitly. 

 

With what I suggest, there is, but only on screens bigger than 1310px, it was more of a quick fix.  Technically there is no blue border, the background is this gradient blue and the padding on the sides of the divs give it that border look. 

 

Looks like the forum is missing some media queries, if you give me a little bit I can write those.

Edited by Wayne Cubed
Link to comment
Share on other sites

.ipsLayout_container {
    max-width: 1310px;
    padding: 0;
    margin: 0 auto;
    position: relative;
}
 
@media screen and (max-width: 1330px) {
   
#ipsLayout_header, #ipsLayout_body {
        margin: 0 10px;
    }    
}
 
If you need any other help just let me know
 
Edit: Just realized someone else already posted this. Let me work on getting you your "blue border" on lower widths (Done - Media query adds border on smaller screens)
Edited by Bills4Ever4Life
  • Like (+1) 1
Link to comment
Share on other sites

3 minutes ago, Bills4Ever4Life said:
.ipsLayout_container {
    max-width: 130px;
    padding: 0;
    margin: 0 auto;
    position: relative;
}
 
If you need any other help just let me know
 
Edit: Just realized someone else already posted this. Let me work on getting you your "blue border" on lower widths

 

 

Yea think it just needs a media query between 1310px and 970px and padding added to the bodycontainer div

Link to comment
Share on other sites

39 minutes ago, SoCal Deek said:

I’ll give the standard answer....”have you tried jiggling the wires”?

 

the answer is always 1) reboot. if that doesn't work, (advanced lesson here) 2) pull the power cord and wait 5 minutes

 

EDIT:

all kidding aside, thanks for all you do. i work in IT (infrastructure, not coding) and no one appreciates anything until it's broke. thank you.

Edited by wnysteel
added text
Link to comment
Share on other sites

Ugh. CSS is like a root canal to me. I can do it when desperate--but would much rather do something else.

 

That's why I buy web themes. Some brilliant dudes in India write them--and you can buy the equivalent of hundreds of hours of labor and tested code for $40.

 

 

Edited by boater
Link to comment
Share on other sites

×
×
  • Create New...