Solved Ticket Skype convos

[tfmore]

Hi Russ,

So it's the same questions as on skype, but now that others have dipped their hands in it, I'm not sure which is the proper code to use.

We were speaking about the menacing little space that the background doesn't cover, at the bottom. No addition you said to use (margins or padding), from within 'Content', worked. So someone else said to use:

body .extraFooter {
 margin-top: 0;
}

Which is working now, but is this done properly? It's not something you ever said to use. Also remember how I asked how we could then have the same amount of space as from the top of the footer headers to the edge, etc.. we realized that it's not going to be possible since other pages (with adsense at the bottom) will end up with uneven spaces as a result. This may be why some of those earlier suggestions you made didn't work.

And then remember the code you gave to remove the header background from devices? It works great but the other code you gave for the semi-transparent box behind the logo, is still there for devices. Others recommend we use this to accomplish that:

@media (max-width:@maxResponsiveWideWidth) { #logoBlock #logo img { background-color: transparent; }}

It's working, but only because it's now transparent. We'd like it not to be there though, just as the background is not there.

Any help you can, whenever you have the time, is always greatly appreciated.

Thanks Russ!

 

[Russ]

The margin-top on the footer is fine, you applied the background image to the content pageContent which isn't apart of the footer. So the margin-top to: 0px would be fine.

What exactly is the problem with the logo though? In desktop screens you'll see the slight background color, then in mobile it's setting it to transparent, isn't that what you're after?

 

[tfmore]

The margin-top on the footer is fine, you applied the background image to the content pageContent which isn't apart of the footer. So the margin-top to: 0px would be fine.

Ok great. Yes so now we have a total of 3 css snippets for this area. The removal of the help links, then the removal of the space (original code), now this newest margin code.

What exactly is the problem with the logo though? In desktop screens you'll see the slight background color, then in mobile it's setting it to transparent, isn't that what you're after?

I may be looking at this wrong. Is there a reason it should be there at all in devices, since the header background is not there?

 

[Russ]

Ok great. Yes so now we have a total of 3 css snippets for this area. The removal of the help links, then the removal of the space (original code), now this newest margin code.



I may be looking at this wrong. Is there a reason it should be there at all in devices, since the header background is not there?

I'll be honest I'm really confused. You have:

• CSS to add a light background to the logo
• CSS to add a background to the header
• CSS to remove the background image in the header in mobile
• CSS to remove the background color around the logo in mobile

Isn't this how you want it to work? I think you may be overthinking this or I'm looking at what you're saying wrong.

 

[tfmore]

You're saying "remove the background color around the logo in mobile", but it's not removed, it's still there, just transparent, right?

 

[Russ]

http://www.w3schools.com/cssref/pr_background-color.asp

By default background colors inherit "transparent", if you set a background color on something then use a media query to "remove it" the proper way would be setting it to transparent.

 

[tfmore]

Russ.

The code you gave us places a semi-transparent block behind the logo, as to emphasize it visiually due to having a new header background. You then provided us the code (query) that limited that header background to Desktop only. So now, on device/mobile the header background does not show, so we would like to remove that box behind the logo as well.

We understand how to make it completely transparent, therefore invisible, but we want to remove it (the padding, the code everything about that block), since it's no longer needed for device/mobile.

 

[Russ]

That's what this code did but it looks like you removed it?

@media (max-width:@maxResponsiveWideWidth) { #logoBlock #logo img { background-color: transparent; }}

If you want to remove the padding in mobile as well just add it to that:

@media (max-width:@maxResponsiveWideWidth) { #logoBlock #logo img { background-color: transparent; padding: 0px; }}

 

[tfmore]

Didn't remove anything. That code makes it completely transparent, it doesn't remove it, depending on how you interpret the word 'remove'. Is there not a way to remove (not have it there at all) for device/mobile?

 

[Russ]

So are you referring to the physical code loading in mobile? Is that what you're trying to avoid?

You can always wrap any code you want in a min-width media query:

@media (min-width:@maxResponsiveWideWidth) { css here }

Then the code would only work on desktop, is that what you're after? I'm still not sure why your first code wouldn't work for you guys though.

 

[tfmore]

So are you referring to the physical code loading in mobile? Is that what you're trying to avoid?

Yes. Prevent it from loading, remove it from view, that is correct. Unless there is a reason it should continue to load, that I'm not understanding.

The first code does work, in that the box is no longer visible to the eye in device/mobile, but it's still there. One can see this by pressing on the logo via mobile. My question has been, why does it need to remain there if it's not required any longer. What you've proposed is to reverse style it, making it invisible. I'm talking about removing it, like when you stated above that we had removed code somewhere, you mean remove like no longer there. That's what we're wanting to do, remove that block code from the same devices that the header background is prevented from showing in.

It's ok man, no worries.

Thanks

 

[Russ]

So do what I mentioned above, find this code:

#logoBlock #logo img {
    padding: 10px;
    background-color: rgba(249, 249, 250, 0.51);
}

Wrap it in a min-width media query.

@media (min-width:@maxResponsiveWideWidth) {
#logoBlock #logo img {
    padding: 10px;
    background-color: rgba(249, 249, 250, 0.51);
}}

That will only use the CSS on screens above maxResponsiveWideWidth.

 

[tfmore]

In regard to the bottom space issue--must we remove the first snippet you gave:

.XenBase .footer .pageContent {
display: none;
}

...each time we would like to use the Style Chooser, bottom left? It seems to have disappeared.

 

[Russ]

Well that CSS hides the container for it, you guys removed part of the footer but not the container which is why I gave you the code. You can change styles via the user dropdown -> preferences

 

[tfmore]

Yes that is how you instructed us to remove the Help links. Preferences, thanks.