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?
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
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.
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
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.
Related
I am developing a website with a large banner that displays differently on each page. The background image is not displaying when I put the background image on the page selector but it will work on the main banner CSS code.
This is for my wordpress site (WordPress 5.2) running a completely custom theme developed from scratch by me. Running PHP version: 7.0.33.
.page-id-15 .bannerImage {}
.postid-15 .bannerImage {}
I have tried both background image and background color with Chrome Developer Tools not displaying that it is seeing this style.
I have confirmed the correct page/post id of 15.
I have put the background image/color into .bannerImage and it displays as expected.
Not sure what else to try. This should be easy.
/// This will display background image and/or color ///
.bannerImage {
/* Set a specific height */
height: 337px;
/* Position and center the image to scale nicely on all screens */
background-position: left;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/// This will not display background image and/or color (showing color style) ///
.page-id-15 .bannerImage { background-color: #35CC4B; }
.postid-15 .bannerImage { background-color: #35CC4B; }
/// HTML Code ///
<div class="bannerImage">
<h2>Contact Us</h2>
</div>
/// Word Press Admin URL to show correct page/post number ///
http://box5308.temp.domains/~naiedmon/wp-admin/post.php?post=15&action=edit
/// URL ///
http://box5308.temp.domains/~naiedmon/contact-us
I expect to see a banner that is 337px high with a width of 100% that is different on each page.
What I actually see is a blank white banner space with the H2 displaying.
Chrome only outputs the .bannerImage selector and not the .page-id-15 .bannerImage or .postid-15 .bannerImage selector.
***** updated *****
Below I have added the code I am seeing when I look at Chrome Developer Tools. Unlike the suggestions I completely agree with should work (I have tried), my selector tag of .page-id-15 .bannerImage {} is not be read by the browser and displayed. I did also attempt .postid-15 .bannerImage {}. This is where it has me stumped.
Screen Capture of Code from Chrome Developer Tools
WordPress sometimes re-writes your CSS. I had this problem before. try using "!important" in all of your CSS attributes. this probably works.
I have had to move on and find another solution to my problem. Unfortunately I have not been able to successfully work with page ids as CSS selectors. My solution around the problem was to add additional classes and call them that way.
Example being on my about page to make a selector .about and attach my background image to that class. A simple fix but I was hoping to understand why I couldn't get the page id to work as a selector.
Onward and upward! Thank you to the community for your responses and attempts to help me out on this!
I was able to get help in the WordPress.org forum and so I thought I would put the answer here in case someone else has this problem.
What I did:
So, for some reason I decided to write my body tag like this (and continued to overlook the error):
<body class="body" <?php body_class(); ?> >.
I do not need to call the class "body". Once I deleted class="body" the correct body string was written and I can now call styles by page id.
The correct body tag in my case looks like this:
<body class="page-template page-template-page_fullwidth page-template-page_fullwidth-php page page-id-394 page-parent logged-in admin-bar no-customize-support" >
The exact advice I received:
The main problem is that you’re not calling the body_class() function
in your theme. Once you do that, the right body classes (like
page-id-15, etc) will be associated with the body element. Right now,
your body element looks like: <body class="topgradient">
If you change your site to another WordPress theme, and then inspect
the body element, you’ll see what it’s supposed to look like.
I am very thankful for communities like this and others!
I have made a complete Bootstrap grid system. I am now uploading my code to a CMS system, and can see there is some CSS from the backend, there is messing up my grid.
If I untick the following code in the inspector window, everything is looking perfect. When the following code is ticked in the inspector window everything is messed up. Is it possible to overwrite this code somehow, so the class is not used?
.cms-area img {
width: 100%;
}
You can use !important in such cases but use it sparingly. Best is to remove the unwanted code and not use !important. !important might cause issues later that are difficult to debug. If possible include your css after other css is included in the code. In CSS, rules that appear later take precedence over earlier rules
Edit:
Set width to auto instead of 100% to fix your alignment issue
Below given is the ideal way to manage css since it allows you to attribute your style content and lets you override the style already applied elsewhere.
.cms-area .your-class img {
width: <your choice>;
}
My team developed the portfolio website.
But we are facing with strange issue.
We pasted this issue in the theme support, but it is not yet solved.
While loading this page, it is giving sometimes like this:
and sometimes like this(We want like this):
How to get rid of this??
I'm not very familiar with Wordpress but if you have access to the CSS that controls the template them maybe you can use Firebug or Inspect Element to find out if the upper and lower divs have any class specifications, and then set the margins to zero in the CSS file like this:
I'll pretend Firebug revealed div classes upperdiv and lowerdiv like this:
<div class="upperdiv">photos</div>
<div class="lowerdiv">photos</div>
in the CSS you could try:
.upperdiv {
margin-bottom: 0px;
}
.bottomdiv {
margin-top: 0px;
}
Hope this helps.
I am using the following html to position anchors under a fixed menu:
<a style="position: relative; top: -150px;" name="services"></a>
This works fine in Firefox but ie, chrome and safari all load the anchors to a slightly different position, obscuring the text 'under' the fixed menu.
Does anyone have any ideas of how I could go about resolving this issue.
wip site is http://mattangel.com.au
Many thanks in advance,
Matt
When I make sites like this, I like to make sure that each "page" has a similar class, but different id. When styling the class, make sure you give the following attributes.
.page {
overflow: hidden;
margin-bottom: 1000px;
}
Adding the margin-bottom will prevent you from seeing the extra pages.
I also noticed that you are using jQuery for the slide to effect, I am not sure why you are using the styling for the a name. Just do the following:
<h1 class="page_title" id="services"><a name="services">Services</a></h1>
And make sure to wrap everything up in the page DIV.
Hello all I am trying to work through (learn) MVC3 and I was playing aroudn with formatting my view using CSS. When using html / webforms have been able to use div tags and apply to that div teh approiate css style.
When using MVC adn creating the layout in my view I have found that multiple CSS styles are not being inheritted.
for example: (sorry for the image but razor syntax seemed to fail on the code cut/paste
In the above I had a div tag for certain sections. however when I used the class property
<div class="myfirststyle" >some content</div>
for each of these div tags only the first one would be detected. The remaining div tags seemed to inherit from the main body style. also defined in the main CSS file.
Can anyone point me to some information on how to setup and style div tags within a view using CSS instead of the stylel property as shown in the above image OR is this correct as you cannot directly call CSS styles from a view as they are only recognized by the page layout.cshtml or masterpage?
Thanks in advance
Update: to help troubleshoot what is happening please refer to the following
Code within the view (using razor engine)
code within the CSS
output from developer toolbar notice how first div layer attributes are detected
output from developer toolbar notice now how image div does not have a style applied
What is interesting is that when viewing the source in html you can still see the CSS tags within the DIV tags they are just not being picked up or inherited for some reason after the first node/div tag
Thanks again for any pointers
Definitely not the case. Something else is going on.
Did you include your CSS file in the view or it's master page?
<link href="#Url.Content("~/Content/YourCSS.css")" rel="stylesheet" type="text/css" />
Or manually add the CSS to your view?
<style type="text/css">
div.myfirststyle { ... }
</style>
If so, have you confirmed the spelling of classes? Typos happen, and we can't see from your image whether or not you added classes to divs. Add some of your code even if you can't format it well enough :)
There is definitely something else funky going on... it has nothing to do with MVC*, it occurs when the browser tries to render it, so the problem must lie with the html & css.
If would recommend validating your HTML and CSS, this will show errors with missing closing tags or anything of the likes that can cause these sorts of errors.
I would recommend using Firefox or Chrome with the Web Developer Toolbar to make html & css validation easier.
*nothing to do with MVC directly... indirectly, sure.
Unfortunantly the error was all on my part. While I did have an error withiin my CSS file regarding the use of the position attribute within my styles. below is the updated style:
.resultController
{
position:static;
width:90%;
border: 1px solid #7C90BE;
margin:5px;
}
.resultImage
{
display:table-cell;
color:Green;
height:36px;
width:36px;
}
.resultContext
{
display:table-cell;
padding:3px;
left:50px;
color:Red;
}
.resultButtons
{
top:5px;
}
The larger problem (all my fault) was the browser was not purging teh cache on close. After dumping the cache and reloading the page the styles began to render correctly. Thanks to all for taking the time to look at this and offer your input.