CODEWITHSUNDEEP
htmlcssmobileselector
ryspbsk
ryspbsk

Reputation: 111

id not applying to HTML element for mobile browser

I am facing some problems with css priority on my mobile device. The problem is that css id selector push-content is not applying to body element. The weird thing is that it is working on my PC browser.

Code not working for mobile device:

/* space between content and navigation */
div #push-content {
  padding-top: 60px;
}
<body id="push-content">

It applied to body element after this:

<body style="padding-top: 60px;">

I don't feel like this is the only way. Any other way to fix this?

Upvotes: 0

Views: 884

Answers (4)

ryspbsk
ryspbsk

Reputation: 111

This is absolutely terrible. I found the problem. My website is powered by wordpress. I was using the wrong link. Basically, I was hosting the website via XAMP on my local PC for testing purposes. I was using the function bloginfo('stylesheet_url'); which gave me nightmares. The stylesheet was not being linked on my mobile phone. It was returning http://localhost:8080/wordpress/ which is the incorrect link for any other device on LAN so I put the IP there and it worked like a charm. I modified it to http://192.168.1.8:8080/wordpress/ 192.168.1.8 is the IP of source/host computer ( you can find it by opening command console on windows and write "ipconfig" )

NOTE: You should use bloginfo('stylesheet_url'); function. I removed it temporarily because I was testing my website on other devices via LAN with help of XAMP.

Thank you everyone for helping. I really appreciate it.

Upvotes: 0

Stender
Stender

Reputation: 2492

your selector is trying to find #push-content inside a div, not a div called #push content. Remove the space between them.

plus - Body is not a div - So you might need body#push-content instead

Upvotes: 1

Chris
Chris

Reputation: 59511

It looks like you have an incorrect selector in your css.

div #push-content will select the element with id push-content that's a child of a div. So you cannot apply this to your body.

Use instead:

#push-content {
  padding-top: 60px;
}

or even better:

.push-content {
  padding-top: 60px;
}

using a class here instead of an id will allow you to use it on more than just one element.

Upvotes: 1

user6342059
user6342059

Reputation:

at first you have spaces in between the id = "push-content"

change it to

id="push-content"

at second you have div #push-content while you are applying it to a body tag so change that to body #push-content

Upvotes: 1

Related Questions