I run Google PageSpeed Insight on my page https://www.datanumen.com
It reports the following issues:
I check back with my page, and find these are not animations at all, instead, they are just buttons. When mouse hovers on them, they will change color. Why they are taken as non-composited animation and how to solve the issues?
According to https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count you have to remove the transition effects for your buttons.
a.btn, a.button, .inner-page-contact form button, .testimonial-form-holder button, input[type="button"], input[type="reset"], input[type="submit"] {
/* -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; */
Related
When on the site and using IE, it is not possible to type in the text fields, the two textareas work ok. Please can someone go to this site and look at 'view source' and tell me why it is not possible to type in the text fields while using IE? I am really struggling to fix this
The text is there, just hidden. I proved this by writing something in there then shift + left arrow to highlight whatever (if anything was in there) and copying it out. It worked.
In terms of the issue it seems to be linked to the padding size. 16px with a 28px max-height. 16x2(top and bottom) being 32 and whatnot doesn't leave much room for the font ;). Now as to why Chrome is smart enough to take your 32px and 0 height element and make it show text, I don't know, supposedly its just better. Cue all the clever people now that will explain the intricacies of how IE and Chrome deal with these issues (or will link some already enlightening posts). By the by, it doesn't work in Firefox either without a fix.
Anyways the CSS below is the issue. Lines 3773 and 675 of your style.css. Changing the padding to something like 5px would make it 10px + 18px font size which is right on the 28px max-height. Oh and I don't know anything about WP so have no idea why or how or when or who or whatever the CSS file is generated by, but assume you can just modify it for now to get it working.
input, select, textarea {
background-color: #fff;
border: 1px solid #ddd;
color: #333;
font-size: 18px;
font-weight: 300;
padding: 5px;
width: 100%;
max-width: 500px;
max-height: 28px;
}
I have been changing lots of things to my website and now I somehow have created it to not fit to screen and has a tiny scroll to the right. Can someone see the issue that is causing this.
Looking to get rid of the black on the right hand side. Only the top and bottom should be black.
www.jobspark.ca is the website
UPDATE
So this is the line of code that is causing the black space. But when I remove the 100% the image shrinks back to fit into the 960px site width. Any ideas? im ready to give up haha Squarespace is not easy to modify
#collection-513d5347e4b0abff73be5267 #site > .wrapper {
max-width: 100%;
padding: 0 0px;
margin: 0 auto;
}
My guess is you you have width:100% on your div elements, this forces the client area of each element to fill the browser. Now since the elements' borders add an additional pixel on each side, you end up with a scrollbar.
I would recommend that you omit width:100% from your div elements. It should auto expand to 100% of it's parent and that should solve your problems.
If all fails this should work,
overflow-y: auto; // or replace auto with scroll
overflow-x: hidden;
I'm trying to design something similar to GitHubs sliding file browser
It's mostly working but im trying to style it and I get this with my borders:
.claim-header, .support-header{
text-align: center;
background-color: $argument-review-banners;
padding: 0.3em;
font-family: "Jockey One",Arial,Georgia,sans-serif;
font-style: normal;
font-weight: 400;
font-size: 20px; // <--- this line breaks it
text-transform: uppercase;
border-color: black;
border-style: solid;
}
it appears as if the font-size within the div (each one of these rows is a div as it's not really a table, as I'm not doing file browsing per se) is what breaks it, it seems to make the calculation of the width different because of font-size. I thought that susy caculates widths based on the base-font, not the font of the element. It's off by 2 pixels and I wonder if this is some sort of rounding error.
I could fix it with yet another wrapper div. But I'm wondering what the proper solution would be.
This issue is not related to Susy - you would have the same problem with any em-based width. Susy has no way of knowing that you changed the font size, or want to use a different em value - that all gets calculated at the browser level.
The container mixin will output the same em width each place you use it (given the same settings), but em's are relative to local font-size. That's calculated by the browser, and Susy has no knowledge of it, or control over it. There are several options.
You can build your grids in rem (root em) values instead, on modern browsers.
You can use the $container-width setting to override the calculated width - use px, %, or set the width .
You can set a single outer container (maybe the <body>?) around all these elements.
You can change the font size in a nested element, rather than on the container.
When ever my website loads I can only see half of it unless I scroll to the left. I tried centering it by putting background-position: center left and it works. But when I zoom out/in it moves to the left/right. Anyone have solutions?
Thanks
I use something similar to the below code for example, if we have a div named wrapper, and width 960px, use the following code.
#wrapper {
width: 960px;
position: relative;
margin: auto;
}
margin: auto; will automatically center your webpage
I am getting a horizontal scroll bar in IE6. Attached the path to zip folder. Download and open index.html page in IE6. Let me know how to remove the scroll bar.IE6-horizontal-scroll bar
Its one or more bad values in paddings. Try replacing all "padding" with "xxx" for a moment and you'll see that the problem disappears.
You also need to study the broken box model on IE.
Solution:
Replace all padding: 10px with padding: 10px 0;
Fix what does not look right (padding wise)
You need to set the horizontal padding of div#container to zero too. You're only setting the top padding in skin-ie.css to zero now. Change padding-top: 0px in skin-ie.css to padding: 0 (the px is unnecessary for zero).
tried
html{
width:100%;
overflow-x: hidden;
}
body{
width:100%;
overflow-x: hidden;
}
yet?
EDIT:
This works but hides right side edge content. See the link screenshot. http://shivanand.in/temp/rightside-edges-hidden.gif – Shivanand
Hmm, that is weird. Are you using any position: absolute DIVs with width set in pixels (not %) that are causing this to happen?