Little help writing CSS for @media queries?!? Please?

1) Tagline

At 1024×768, the css in operation is:

.navbar-wrapper .navbar h2 {
    float: right;
    padding-right: 5px;
    line-height: 19px;
    text-align: right;
    font-size: 15px !important;
}

style.css #288

2) Navbar

.navbar .nav {
    font-size: 14px !important;
    margin-right: 0px;
}

style.css #295

So now unsure on what is the problem?

Back to #10, you said these were not being executed?

Yes, those are the codes that I have written on my @media css for viewport 1024×768 for ipad (landscape). But they are not being shown on my website. They’re not being executed. Why could this be?

I don’t know what else to do, I’m gonna try and add the missing ; where it belongs see if it changes anything. Also gonna go through my @media css to see if I misspelled a word or missed a {} or ; . I look forward to hearing from you, once again, thank you for helping! ??

I tried adding the missing ; but it changed nothing. I know you said that it wasn’t the problem but I just had to try. I also went through my whole style sheet and didn’t find any missing { } or ; no misspelled words either. I also tried adding “.sticky-enabled” – like so

.sticky-enabled .navbar-wrapper .navbar h2{
float: right;
padding-right: 5px;
line-height: 19px;
text-align: right;
font-size: 15px !important;
}
.sticky-enabled .navbar .nav {
font-size: 14px !important;
margin-right: 0px;
}

to both selectors but no success. If you have a chance could you check my site with the Viewport Resizer so you could see what my problem is? Click on the 1024×768 viewport for ipad (Landscape) and you’ll see my header content overlapping. It’s also doing the same in Viewport – HDTV 1080pSize: 1920×1080 (Portrait). In the (landscape) view the header box is stretched out, don’t know why that’s happening.

Please let me know if you find a solution to this. Thanks! ??

Don’t think this problem is getting fixed. I’ve tried everything I can, but still can’t target the header content. Something is over writing my custom CSS for only that specific viewport (1024×768 – Landscape), it’s the only one that I can’t make any changes to.

At that setting, h2.site-description is driving the tagline. Line #72 of your style.css.

h2.site-description {
    font-size: 18px;
    font-style: normal !important;
    padding: 12px 0px 0px;
    font-family: "Cinzel",Arial;
    color: #808080 !important;
}

and

.sticky-enabled .navbar-wrapper .navbar h2 {
    margin-top: 1px;
}

What’s your intended strategy for Menu – Twitter – Tagline?

I just want to add space in between the Menu – Twitter Icon – Tagline.
I’ve tried using this codes for the tagline –

h2.site-description{}

or

.sticky-enabled .navbar-wrapper .navbar h2{}

but it’s still not letting me make any changes.

It’s like these are not the correct selectors for changing the tagline, but they are the correct ones. It’s just not letting me make any changes.

This is the css that I have for viewport 1024×768 (landscape)

/* ============================================== */
/* iPad Landscape                                 */
/*                                       1024x768 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {

.sticky-enabled .navbar-wrapper .navbar h2{
float: right;
padding-right: 5px;
line-height: 19px;
text-align: right;
font-size: 15px !important;
}
.sticky-enabled .navbar .nav {
font-size: 14px !important;
margin-right: 0px;
}

}

Can you see a mistake in the css?

It has to be the selectors that are wrong, I’ve tried changing anything and everything using those selectors but nothings changes! @rdellconsulting, do you know of any other selectors to target the header content that I can try out? Thanks.

That CSS kicks in when the sticky menu is enabled (ie you scrolled down). You an also set .sticky-disabled for the header before scroll. If you set anything without either, it will apply to both.

Throw in a background-color: red; to prove the css is being picked up.

One thing I noticed on your site is that all of the code you’ve posted appears to be commented out. This is what I see when I visit your site:

/*.navbar-wrapper .navbar h2{
float: right;
padding-right: 5px;
line-height: 19px;
text-align: right;
font-size: 55px !important;
}
.sticky-enabled .navbar .nav {
font-size: 14px !important;
margin-right: 0px;
}*/

Anything between /* and */, like your code in this snippet here, is considered a comment and is ignored by the browser.

@rdellconsulting

I tried your suggestion and it didn’t work. The CSS is somehow not being picked up!? This is the code that I tried out

/* ============================================== */
/* iPad Landscape                                 */
/*                                       1024x768 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {

body{
background-color: red !important;
font-size: 55px;
}
}

@stephencottontail

Thanks for replying!

I know that those selectors are commented out, I did that to not remove them when I was trying out other properties:values. Any other suggestions?

for the background also background-image: none;
or just:
background: red;

I just noticed that if I check your site on my actual iPad, your CSS gets picked up correctly. If I check your site on my laptop using Viewport Resizer, it isn’t picked up. I wonder if VR isn’t simulating min-device-width and max-device-width correctly.

You’re right @stephencottontail, the CSS is being picked up on the actual ipad. I finally got a hold of an ipad to see my site on it and it is showing my css correctly. It was the Viewport Resizer that was not showing it correctly! That’s why I thought I was using the wrong selectors. It’s weird that it shows changes that I made to other viewports but not to this specific one.

One last question, what’s the CSS to target the back to top arrow?
I’ve tried

i.btt-arrow {
display:none;
}

but this only removes the arrow icon. What’s the correct selector for the whole arrow button?

Thanks for all your help, @rdellconsulting, @d4z_c0nf and @stephencottontail!

.tc-btt-wrapper.show {}

@rdellconsulting

Thank you.