I have tried all the possibilities but surely somewhere I am mistaking. I am creating a bootstrap website (http://design.logohour.com) site seems ok as well as aligned well in center, but when I am trying to change the screen size lesser than 850px or more less, all the content goes to the left.
I know there is something wrong with CSS but unable to find out since I want all my content in the center without overflow-x ... need an expert opinion.
Everything looks fine on my end!
Your cache is probably outdated. Try these things to see if it solves:
1) Assuming you're using Google Chrome, open an incognito window and view the site.
Why? Incognito mode will allow you to view your site without using cache
2) Refresh your cache using the web inspector.
If you open up the web inspector (Right click and click "Inspect") you unlock a magical way to clear your cache. With the web inspector open, right click the reload button and empty the cache.
Good luck solving the issue!
Related
I just started working on a Wordpress theme, but it won't reload the stylesheet after I update. I searched throughout here and tried the common remedies, including:
Reload holding ctrl/shift
Reload while Developer Tools is open
Reload twice quickly in a row
Get firefox/firebug
Add the timestamp generator to the end of the href
Install an extension, specifically this one: https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?utm_source=chrome-app-launcher-info-dialog\
It seems like it only reloads every once in a while, and it really impedes my ability to write CSS...
Does anyone here have any ideas to fix this?
Thanks.
edit: I think it may have something to do with my host (it's free). I'm just going to move offline for development, I think.
You can always go into Incognito which does not use any chached data. It also does not save any history information.
To use it you can press Crtl+Shift+N then navigate to the page / website that you want to see.
You can also access Incognito by pressing the ☰ icon in the top right of your chrome window and click on New incognito window:
If your page is still not updating I would make sure that the file is even being saved. Because at this point your issue would not be because of files being cached..
My only other thought is that it could be your CSS itself... Sometimes your CSS is not applied due to an error in your code, another piece of code counteracting it, etc...
So see what is being applied:
press F12
OR
right click somewhere on your page and press Inspect Element.
You should see something like this (except with your code / webpage):
The parts of the "Inspect Element" will be sized slightly different but you can change those around...
Essentially click on the html element that you are trying to change the css on...
You will now see what css elements are being displayed... If they are crossed out, it most likely means that there is some other parent (or just some other property) that is canceling out the css you are adding.
These are just some of the reasons why the CSS may not be working! But I hope this helps!
When working with child theme, make sure you are loading the right css file. Sometimes you load the parent's css file.
Make sure to disable cache plugin in development time.
I have a very irritating issue on the live site I'm designing for a client. I've dug into the CSS and HTML of the site to no avail. This only occurs in Chrome. The work in progress can be found at live.dancingsheepcoffee.com
Background:
Using Wordpress as CMS, theme designed with Underscores (_s)
Also using 960.gs system to aid layout design
Issue only occurs in Chrome; IE, Firefox, Safari, all display great.
Here's the breakdown:
On a virgin load of the site, the page displays as designed, issue free.
Upon a refresh (or second visit) the page loads "zoomed in" almost 200%, for no apparent reason. Text, navigation, headers, sidebar, and even the tiled background image. Site-wide. The main logo seems to be unaffected.
Zooming out and then back in (i.e., zoom to 90% then back to 100%) 'fixes' the page and displays as designed.
Also following the link to the same page from the menu bar loads the page correctly, however the content "jumps" sizes before displaying the correct content.
Content box remains at 960px wide (except when user toggles zoom, appropriately)
Background image also "zooms" on page load but then displays correctly when resolved above.
And the worst part is, I can't duplicate this on my main work computer, but the issue displays on every other computer. The way the issue works, it sounds like it's something on the client side, as the web server seems to render the page perfect every time, but perhaps the cached version isn't working. A thought to consider.
I greatly appreciate the time considered and help with this issue. I'll provide any applicable code to aide troubleshooting. Thanks again!
I have a jQuery Mobile application, and on certain pages, such as for example this one: "http://olkensway.se/upplevdinkommun/activities.php?community_id=6&category_id=1", I'm facing a problem. When the page is loaded the first time, it shows correctly, but the problem occurs when I refresh the page (by pressing F5). Try and see for yourselves. The search field re-sizes and becomes much larger than what is supposed to be. This problem occurs both in my desktop browser (Tested with Google Chrome and Internet Explorer) and my mobile browser (Google Chrome as well). Using Google, I haven't found anybody with the same problem yet. I'm new to both jQueryMobile and web design in general. Is this a problem with my PHP, HTML or CSS. Some conflict with jQM? Please tell if I should show more code than what is available by viewing the page's source.
EDIT: It can be worth telling that I have other pages, not using any PHP, where this isn't a problem. So it's likely come conflict there...
When I load the page, the search thing is taking up the entire page. After inspecting the element in chrome, the article element's font size is 200% (.ui-body-c) . When I unchecked that it went to a "normal" size. I'm not sure exactly what you want it to look like, but maybe that's your problem? hopefully that helps
I've created a HTML + PHP simple page with some javascript that provide from google like adsense and google plus button.
The thing is the page is very short. I meant like not much content on it and I'm curious that why when the page is fully loaded like everything appeared and nothing missing, but the bar on google chrome or like firefox is still loading?
I did test removed the javascript for ads and button and it still having the samething
Is this normal? or maybe something wrong in my code that I should look at?
Open the developers tools (Ctrl-Shift-I in Chrome), go to the network tab and load your page, you'll see exactly what component is taking what time.
Most clever add-ons / plugins like google+, Analytics, etc. load when your own content is completely loaded so you might see some action after the page is visually done.
Edit: The developers tools in Chrome can easily be reached from the menu as well...
Check out http://tools.pingdom.com/fpt/
It will let you know what is still loading.
If nothing pops out then your JavaScript is probably in an infinite loop.
I have my site and it looks great on FF, SF, IE8 but on google chrome it shows a blank page, but if you click on view source, it is there !!
on js console I got "Failed to load resource".
Also I have the same site on my localhost and it works great on chrome !!
My site: http://grupooak.com
take a look on chrome and if you know how to fix it , or a tool to debug it and find the issue lmk :)
Thanks !!
btw the site was developed on php (akelos framework)
Sometimes, if you try several times you can get the page, but it gets stock if you click on any link
You need to make sure the DOM is valid, as your html seems messy I would advise you to fix the following errors:
http://validator.w3.org/check?uri=http://grupooak.com/app/%3Fak%3D/account/sign_in/&charset=(detect+automatically)&doctype=Inline&group=0
Just a thought but try loading the page without any javascript files, and if the page loads, add one back in a t a time testing if it still loads, when you add the javascript back in and the page fails to load, let us know what that file is.
Its could be one of the following:
Your server is failing to respond to the call, unlikely
there is a memory leak in the javascript files, causing the brows to focus on the file which does not continue to load the file.
Reasons for this is if you go to the url: view-source:http://grupooak.com/app/?ak=/account/sign_in/ in Google Chrome, you will see the whole response, meaning that it is something that is loaded into the browser that's the issue.
If you inspect the element of the page you will see that it stops loading loading the page after the first javascript include, try UPDATING Your Libraries versions.
Have you tried disabling caching and/or output encoding?
Something similar happened to me before, and it was related to the Mime type.
If that's the case, take a look at this article: http://www.dyeager.org/post/2009/01/php-xhtml-mime-type-caching
maybe fix this tag.
<img style="width: 95px; height: 113px;" src="/app/images/homepage10.jpg"
also look at the developer tools in chrome they will point you to this error
/app/?ak=/account/sign_in/ Failed to load resource
info about developer tools
http://code.google.com/chrome/devtools/docs/overview.html
First of all you should have a look at the W3C's HTML validator output, correct all of the errors, and try again. I guess that it will solve your issues with Chrome.
When I inspect the computed styles in chrome, the html element's height is 0. This might explain why the page is blank.
It's your rotator script. The first argument must be a beforeLoad event object.