CSS coders: Can you correct the header?

[SDS]

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.

[sullim4]

I can't reproduce the problem from the screenshot; tried Chrome, Edge, and IE11.  How are you getting that to reproduce?

[SDS]

Mac Safari and Chrome.

[ThunderingHerd]

I'm on my Mac running Safari and I'm not seeing what you're showing up there.  Here's what I see: 

 

Never mind, I see it when I exit full screen mode....

 

Edited June 4, 2018 by ThunderingHerd

[sullim4]

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.

[HOUSE]

Life is hell

[spudz000]

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 June 4, 2018 by spudz000

[Big Turk]

I wasnt aware CSS coder was an actual position, hahaha ?

[Juice_32]

I have no idea what you guys are talking about but thanks for all you do!

[Wayne Cubed]

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 June 4, 2018 by Wayne Cubed

[BringBackFergy]

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.

[SDS]

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. 

[Wayne Cubed]

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 June 4, 2018 by Wayne Cubed

[Bills4Ever4Life]

.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 June 4, 2018 by Bills4Ever4Life

[SoCal Deek]

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

[Wayne Cubed]

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

[Bills4Ever4Life]

7 minutes ago, Wayne Cubed said:

 

 

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

Fixed my response above. 

[Yav]

try rubbing the CSS fix it cream on there. 

[wnysteel]

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 June 4, 2018 by wnysteel
added text

[boater]

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 June 4, 2018 by boater