I've been trying to debug a web site to speed it up. I search a plugin in wordpress and I found Autoptimizer and decided to use it. After minifying CSS files and inline CSS files, some bug appeared in the blog. I saw that web pages act like they are on mobile-view mode except index.php so home page. I do not know how to solve it and I could not fix it.
This is the homepage of wordpress website. As you see footer is good positioned. But when you check the other pages such as this one, it is aligned like I open the web page in a mobile device. Not only footer but all body parts, elements, classes act like they are in a mobile device.
I deactivated the CSS options of AutoOptimizer but afterwards some HTML elements got broken. That's why I re-activated the plugin and thought this problem (instead of some broken tags) can be solvable than other one.
Please help me. I think sharing CSS codes is unnecessary because you can display them easily with dev options in browser. Even I compared their container classes. I try to find differences between container div in index.php and container div in other pages but they are the same classes and have same attributes.
You're missing float, margin-right, and position on the other pages footer in element with class one-fourth from what I can tell. Seems like you forgot to load a stylesheet to me.
Edit:
Did some further review and it seems like you're missing the following styling for the class one-fourth in your footer:
position: relative;
float: left;
margin-right: 4%;
width: 22%;
Related
after I’ve been looking for a similar question to solve my issue, which was unsuccessful, I am now addressing to the community for help!
On my portfolio-website https://www.signz-fiction.at (umbrella quantum template) there is a preloader which doesn’t go away on mobile devices after you refresh the page (or press the green logo on top).
Although it is not an optimal solution for me i tried to disable the preloader under custom css but this did not work either
#preloader{display:none !important;}
Or
body > .preloader{ display: none; }
Though I am ui designer, I have only basic knowledge in web development and so I don't know how to fix the problem.
Grateful for any help, thx!
Ps:
The website is a bit older and there was a problem with the google font when i switched from http to https.
Could it be that the prealoder-thing is also related to the switch?
I think you may be confusing the loader animation with a preloader (which pre loads images and other assets to make them readily available).
On your site, the loader animation element has the class .loader, I've looked at your site with View-Source and haven't seen any element with the .preloader class
Try:
body .loader {
display: none;
}
but note that this might not help because the loader is controlled by JavaScript which might remove this property on page load.
Also, you have errors on your site:
mixed active content - avoid using http:// on your https:// site
a JS error you should look at, that may be the reason why the loader isn't being removed on time
My blog posts appear in the footer section of my website. I've looked at my code, and I can't figure out where the problem is stemming from. I've included a link to a dropbox file that includes all of my current theme folders, as well as a screenshot of what my site currently looks like. If anyone has any solutions I would appreciate it!
dropbox.com/sh/jvafvxqylg8wuye/AACSatmJfpbLa02-bsbn0yH6a?dl=0
Judging by the template files and without seeing the outputted HTML, this could be caused by mismatching element declarations. In the header.php the <header> element is declared but never closed. Try closing the header element with </header> in the end of the header.php
It could be a styling issue - have you tried adding clear: both; to .site-footer {} in your CSS?
EDIT:
I'd suggest that you wrap your content in a container that has clear: both; assigned to it - this will prevent your articles from clashing with anything else on the page.
Stewartside helped me use JQuery to create a specific function for my main navigation on my website (thanks again!). I created a child theme to add the changes to my header.php file and it has started to cause a weird layout change. My homepage should have 20px padding, which is NOT a special CSS modification, but the child theme automatically removes it. This doesn't happen with other pages on my site, just the homepage. I have also added/removed the jquery code to make sure that wasn't the problem; the style.css file for the child theme only has the "child theme" coding, no modified CSS.
Homepage: http://bostonirishclothing.com
About Us: http://bostonirishclothing.com/about-us
Is there anything that would cause this?
Get the Firebug add on for your browser (available on Chrome and Firefox). Then right click the section that is causing the issue and you can see the coding and all the relevant CSS functions including the files they are in (to the chosen section). It will also show which CSS function is being prioritised compared to the other. Then you can modify the functions or add new ones to make it work.
A dirty way to do things is to use !important however this should only be used sparingly as it can screw with other pages. An easy way to avoid that is to make the CSS function for example .entry-content { color:#fff; } becomes .post-x .entry-content { color:fff!important; }
Test things out. Firebug is amazing help when editing CSS. You can even do some of the tests in firebug itself.
I'm replacing all Fireworks-generated table-based rollovers on my site with CSS rollovers; I've so far had luck with my menu bar, which works properly on each page on the site.
Today I tried to update my main page's marquee (div id="titlemain" on theapplenewsreel.com), and while the rollovers seem to work fine on the staging page where I designed and tested said element (theapplenewsreel.com/titlemain.html), the code refuses to work when I integrate it into the page where I intend to use it. I've checked the link to the stylesheet; it points to the exact same CSS file. Can anyone suggest a reason why the marquee's share links don't update on the index.html file?
Try updating the CSS to include px in the background position numbers:
#titlesharefb:hover {
background-position: 0 -80px;
}
I have a website that will be loaded in a web frame of an iPad app, so I have created a separate CSS file for the iPad, which is automatically loaded by a user agent call. Nothing too difficult here.
The problem is that 2 divs are not responding to the display:none CSS. The sidebar and the footer are still showing, despite being specifically called in the CSS just the same as all of the other elements, which are hidden correctly in Safari on the iPad.
www.themonitorgroup.com/disclaimer.html is a good page to illustrate this issue.
www.themonitorgroup.com/css/ipad.css is the specific CSS file for the ipad.
I assume there is something stupid simple I am missing. Please let me know if you can find anything. Thanks so much in advance.
Validators are your friend. You're missing a closing brace here:
#mainnav {
display: none;
And you have #sidebar rather than .sidebar in the style sheet.