So I have this Wordpress-site set up:
http://dev10.xmedia.no/
One my computer and on my colleagues computer the site displays normal as it should. On my Android-phone, when in Chrome's Private Surf Mode it works at normal.
But its "screwed up" without images and CSS on the customers computer, on my phone in Chrome's normal mode and when rendering it through Googles speed test its also missing.
I've set up multiple WP-sites the same way on servers with the same settings, so there should be nothing special here. Anyone got a clue why its not loaded correctly on some devices?
The CSS isn't being loaded because it's password protected. If you try to go directly to the stylesheet you'll see what I mean:
http://dev10.xmedia.no/wp-content/themes/fiberteam/assets/styles/style.css
Remove this block and the stylesheets will load properly.
You only load 3 stylesheets.
style.css?ver=1, font awesome, and the video player css.
style.css seems to have very little in it:
.wpml-ls-legacy-list-horizontal{border:1px solid transparent;padding:7px;clear:both}.wpml-ls-legacy-list-horizontal>ul{padding:0;margin:0 !important;list-style-type:none}.wpml-ls-legacy-list-horizontal .wpml-ls-item{padding:0;margin:0;list-style-type:none;display:inline-block}.wpml-ls-legacy-list-horizontal a{display:block;text-decoration:none;padding:5px 10px;line-height:1}.wpml-ls-legacy-list-horizontal a span{vertical-align:middle}.wpml-ls-legacy-list-horizontal .wpml-ls-flag{display:inline;vertical-align:middle;width:18px;height:12px}.wpml-ls-legacy-list-horizontal .wpml-ls-flag+span{margin-left:.4em}.rtl .wpml-ls-legacy-list-horizontal .wpml-ls-flag+span{margin-left:0;margin-right:.4em}.wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer{margin-bottom:30px}.wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer>ul{text-align:center}
So it looks like you just forgot to load the main stylesheet.
UPDATE When I accessed the link to the CSS in your comment, I got a CAPTCHA. Now when I access the site, I see the site as it should look. Could that be your problem?
There is no problem in the code. i have downloaded source code and put in on my local and it is working fine. it seems there is something corrupted on hosting server.
Related
I'm totally new in website development and as my first experiment I'm working with website to replace my company's old site (if success).
Have done pritty much allready but I really want to have this popup image gallery to work with Magnific popup for the responsiveness.
I have setup a local server with QuickPhp for development as I don't have server for my website yet.
Eventhough my site is working when tested in CodePen but not on my Quickphp server.
I made sort of gallery site that contains images that is supposed to open to popup for larger view and to zoom closer if wanted. The popup itself will work but some of code doesn't work. In example:
-not showin close button.
-not closing popup when clicking background.
-no animation when popup opens.
this all works with the same code tested on the CodePen-site though.
Magnific popup JS and the CSS codes I copied from the Build tool(to the folder within the sites .php)
They are included to .php page with script. CSS in the head and the JS in the footer. JQuery is from google https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
For now I would need answears to theese Questions:
1. Is it possible that the problem is within the QuickPhp-server setup of mine? If It doesn't fully support jquery in local setup?
2. What else could be wrong?
If needed I can put the codes here later.
The problem was in the code allthough. I implemented the codes from the Maqnific website again and red the documentation over 5 times. I also noticed that the included stylesheet files needed to be linked from the website's root folder exactly as shown on the Macnific guide.
If anyone is having similar problem I suggest to keep on reading and searching. Taking a brake for day or two makes a differens in perspective too. Some time apart of the project helps to notice things that you might not have seen before. Especially checking the code for incorrections is a bitch.
Just yesterday I found a typo in my media query meta tag that was making my site not to change styling when viewport size changes. The typo was from 2 weeks ago. max-device-width was written as max-divice-width.
i have a word press site
a point about the loading css files; when i want to change the main color of site i see that my faviorit color is there and i just should click on save bottun but when i click it dosnt load,it loads and at the end it goes on this url that it isnt any thing there just an url:
http://bourssanj.com/bours/wp-admin/admin.php?page=of-topbar-menu&settings-updated=true
this is my site: bourssanj.com/bours
whats problem?!
Have you tried using Chrome's developer tools, or Firefox's Firebug? Just by opening the developer tools I looked at your code and I found, for example, this:
<img src="http://localhost:81/bours/wp-content/uploads/2013/08/dt-016.jpg" alt="">
Where is this being echoed from? Can you change it?
The problem here is you uploaded your site to the server, but you left a lot of references to files that were in your localhost. That won't work anymore, because I don't have those images in my localhost. All the references must go to your server now.
Normal when i try to customise WP style i would use inspector view in Chrome and this would allow me to locate style code easily.
i was wondering how i can do the same for HTML or PHP code in WP such as plugins and the CMS it self?
Thank you
PHP is server side code and can't be found in the browser. If you want to see the code for WP plugins then you'll need to either download the plugin to your local machine or view the files on the server hosting WP.
Iassume you run it on your own root-/ webserver,...
so if you want to add HTML Elements to a post or site just do it in the text few like you would in an HTML-Editor like for some link thing for instance (you should allready know that..'pretty shure it also works for js).
However if you want to customize the way every page on your blog looks, you can also do this manually, but it won't be as easy.
There should be a section under the theme customization part where you could upload your own css and php (at least with a lot of styles it's like that).
I WOULD NOT mess with the files on your server, if you don't know what you are doin, cause - to be honest - you can make a great blog/ website by using the tools it gives to you. ;)
I recommend using the stylesheet from your wordpress theme for a custom HTML-document based on the source of a blog page, if you go for the looks... and in every other case just use plugins! :P
The following is happening to me:
I have a CSS with a font where I set the size in em.
All works fine and gives me the result I want. But on the follwing conditions something strange happens:
After developping my site with PHP and HTML pages and of course a CSS stylesheet, when I move the site form a subdirectory to the directory (a level higer) the font size suddenly changes.
I also have the same problem with the folling condition: Everything works fine on domain www.abc.com but as soon as I access the site trough a site alias www.xyz.com again the font size, specified in em, differs from the other.
Is there something I need to think about in the CSS?
Regards,
Hans
After ensuring your CSS file is being accessed correctly...
Have you set a base font size? EM's are relative, so a base size needs to be set. For example in your CSS you would use:
html, body{font-size:14px;}
p{font-size:1em;}
h1{font-size:1.2em;}
Problem solved! It seems what I described as my problem only happens in Chrome.
I did clear cache, cookies, history, etc. What I did not clear were passwords, site certifcates and apps hosted.
After clearing everything in my browser the site came up correctly though normal domain name and through alias domain name.
Thans for the help.
My problem was not about the font size actually the zoom level of each domain. Check your zoom size for each domain is the same
I am using the delight theme in WP on my site and have a mobile website version of the main site, within a mobile folder.
I have sort of been abandoned by the mobile site provider who gave me the js for the header.php file which works fine and the mobile site loads ok on a mobile device. However, the links on the mobile pages dont take the visitor back to the main site as the mobile script reloads so they are stuck on the mobile site.
I have had to disable the js in the header until I can find a solution so I now have no mobile site until I can sort it.
Loading the mobile site with javascript in header.php works fine.
I have seen some very useful posts on here about very similar issues but writing php and session / cookies is beyond me, although I can follow clear instructions.I have run out of ideas as the stuff I am reading up on is so diverse and beyond my skills.
Can anyone provide me with the solution, help me out, bit of php, cookie or ??? I r
Really be grateful as I have disabled the js until I can resolve this - meaning no mobile version :(
thanks
Steve
If you require any more info let me know, thanks again..
Oh, I did copy the main site into a new sub folder called desktop without the js and pointed the mobile page link to it, which actually took me back to the main site / page not found, but got there. However, soon as I pressed any Nav on main site, the mobile version reloaded, damn :)
Header.php redirect script :
if (screen.width <= 800) {
window.location = "http://www.icesugarmedia.com/mobile/";;
}
</script>
code for link back to main site on each page (as a small image):
<div style="margin:5px 0px 25px 0px;"><img src="images/full_website_buton.png" /></div>
The mis-spelling on the button name matched the image file name
This link talks about what you're looking for.
http://www.malphursinteractive.com/view-full-site-mobile-redirect-script/
There's some pretty good solutions in that page. It's the #1 google result for the query of "script display full site mobile redirect". There seemed to be many other good solutions in the top 10 results.
What you're looking for is a solution to a problem that I think a lot of us should find, because many smartphone users want to view the full site now.
A simple solution to the problem can be to copy all the files in your directories. Create a new directory named for example "site.com/full-site/". Paste all the copied files into that directory. Remove the mobile redirect from the header.php file. Make the "view full site link" take them to full-site/index.php rather than the root directory. Now they won't encounter the line of code that forces them to the home page, unless your links are coded in "http://site.com/link.php" as opposed to "link.php". Either way, whichever method you choose, you have to prevent the user from loading the redirect script.