I've read so many answers to this question but still can't figure out how to stop elements of my blog moving when a browser is resized. I just got a new template and didn't have this problem with my last one.
My site is: shannondarko.co.uk
I'm not sure what section of code to provide you with but I think it might be this part?
<b:template-skin>
<b:variable default='960px' name='content.width' type='length' value='1500px'/>
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='240px'/>
<![CDATA[
body {
--min-width: $(content.width);
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
--min-width: $(content.width);
max-width: 100%;
_width: $(content.width);
}
.main-inner .columns {
--padding-left: $(main.column.left.width);
--padding-right: $(main.column.right.width);
}
.main-inner .fauxcolumn-center-outer {
left: $(main.column.left.width);
--right: $(main.column.right.width);
/* IE6 does not respect left and right together */
_width: expression(this.parentNode.offsetWidth -
parseInt("$(main.column.left.width)") -
parseInt("$(main.column.right.width)") + 'px');
}
.main-inner .fauxcolumn-left-outer {
width: $(main.column.left.width);
}
.main-inner .fauxcolumn-right-outer {
--width: $(main.column.right.width);
}
.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}
.main-inner .column-right-outer {
--width: $(main.column.right.width);
--margin-right: -$(main.column.right.width);
}
#layout {
min-width: 0;
}
#layout .content-outer {
min-width: 0;
width: 800px;
}
#layout .region-inner {
min-width: 0;
width: auto;
</b:template-skin>
Thanks in advance if you can help!
Related
Helping a client update their Shopify theme. The previous designer used an unconventional method for the base grid. I need help translating the code.
Read an old article about this subject, but I still did not understand.
$phone: "screen and (max-width: 640px)";
$tablet: "screen and (min-width: 641px) and (max-width: 1007px)";
$tablet-and-up: "screen and (min-width: 641px)";
$pocket: "screen and (max-width: 1007px)";
$lap: "screen and (min-width: 1008px) and (max-width: 1239px)";
$lap-and-up: "screen and (min-width: 1008px)";
$desk: "screen and (min-width: 1240px)";
$widescreen: "screen and (min-width: 1500px)";
.\31\/2, .\32\/4, .\36\/12 {
width: 50%;
}
.\31\/3, .\34\/12 {
width: 33.33333%;
}
.\32\/3, .\38\/12 {
width: 66.66667%;
}
.\31\/4, .\33\/12 {
width: 25%;
}
.\33\/4, .\39\/12 {
width: 75%;
}
.\31\/12 {
width: 8.33333%;
}
.\32\/12 {
width: 16.66667%;
}
.\35\/12 {
width: 41.66667%;
}
.\37\/12 {
width: 58.33333%;
}
.\31\30\/12 {
width: 83.33333%;
}
.\31\31\/12 {
width: 91.66667%;
}
#media #{$phone} {
.hidden-phone {
display: none !important;
}
.\31\/2--phone, .\32\/4--phone, .\36\/12--phone {
width: 50%;
}
.\31\/3--phone, .\34\/12--phone {
width: 33.33333%;
}
.\32\/3--phone, .\38\/12--phone {
width: 66.66667%;
}
.\31\/4--phone, .\33\/12--phone {
width: 25%;
}
.\33\/4--phone, .\39\/12--phone {
width: 75%;
}
.\31\/12--phone {
width: 8.33333%;
}
.\32\/12--phone {
width: 16.66667%;
}
.\35\/12--phone {
width: 41.66667%;
}
.\37\/12--phone {
width: 58.33333%;
}
.\31\30\/12--phone {
width: 83.33333%;
}
.\31\31\/12--phone {
width: 91.66667%;
}
}
#media #{$tablet} {
.hidden-tablet {
display: none !important;
}
.\31\/2--tablet, .\32\/4--tablet, .\36\/12--tablet {
width: 50%;
}
.\31\/3--tablet, .\34\/12--tablet {
width: 33.33333%;
}
.\32\/3--tablet, .\38\/12--tablet {
width: 66.66667%;
}
.\31\/4--tablet, .\33\/12--tablet {
width: 25%;
}
.\33\/4--tablet, .\39\/12--tablet {
width: 75%;
}
.\31\/12--tablet {
width: 8.33333%;
}
.\32\/12--tablet {
width: 16.66667%;
}
.\35\/12--tablet {
width: 41.66667%;
}
.\37\/12--tablet {
width: 58.33333%;
}
.\31\30\/12--tablet {
width: 83.33333%;
}
.\31\31\/12--tablet {
width: 91.66667%;
}
}
#media #{$tablet-and-up} {
.hidden-tablet-and-up {
display: none !important;
}
.\31\/2--tablet-and-up, .\32\/4--tablet-and-up, .\36\/12--tablet-and-up {
width: 50%;
}
.\31\/3--tablet-and-up, .\34\/12--tablet-and-up {
width: 33.33333%;
}
.\32\/3--tablet-and-up, .\38\/12--tablet-and-up {
width: 66.66667%;
}
.\31\/4--tablet-and-up, .\33\/12--tablet-and-up {
width: 25%;
}
.\33\/4--tablet-and-up, .\39\/12--tablet-and-up {
width: 75%;
}
.\31\/12--tablet-and-up {
width: 8.33333%;
}
.\32\/12--tablet-and-up {
width: 16.66667%;
}
.\35\/12--tablet-and-up {
width: 41.66667%;
}
.\37\/12--tablet-and-up {
width: 58.33333%;
}
.\31\30\/12--tablet-and-up {
width: 83.33333%;
}
.\31\31\/12--tablet-and-up {
width: 91.66667%;
}
}
#media #{$pocket} {
.hidden-pocket {
display: none !important;
}
.\31\/2--pocket, .\32\/4--pocket, .\36\/12--pocket {
width: 50%;
}
.\31\/3--pocket, .\34\/12--pocket {
width: 33.33333%;
}
.\32\/3--pocket, .\38\/12--pocket {
width: 66.66667%;
}
.\31\/4--pocket, .\33\/12--pocket {
width: 25%;
}
.\33\/4--pocket, .\39\/12--pocket {
width: 75%;
}
.\31\/12--pocket {
width: 8.33333%;
}
.\32\/12--pocket {
width: 16.66667%;
}
.\35\/12--pocket {
width: 41.66667%;
}
.\37\/12--pocket {
width: 58.33333%;
}
.\31\30\/12--pocket {
width: 83.33333%;
}
.\31\31\/12--pocket {
width: 91.66667%;
}
}
#media #{$lap} {
.hidden-lap {
display: none !important;
}
.\31\/2--lap, .\32\/4--lap, .\36\/12--lap {
width: 50%;
}
.\31\/3--lap, .\34\/12--lap {
width: 33.33333%;
}
.\32\/3--lap, .\38\/12--lap {
width: 66.66667%;
}
.\31\/4--lap, .\33\/12--lap {
width: 25%;
}
.\33\/4--lap, .\39\/12--lap {
width: 75%;
}
.\31\/12--lap {
width: 8.33333%;
}
.\32\/12--lap {
width: 16.66667%;
}
.\35\/12--lap {
width: 41.66667%;
}
.\37\/12--lap {
width: 58.33333%;
}
.\31\30\/12--lap {
width: 83.33333%;
}
.\31\31\/12--lap {
width: 91.66667%;
}
}
#media #{$lap-and-up} {
.hidden-lap-and-up {
display: none !important;
}
.\31\/2--lap-and-up, .\32\/4--lap-and-up, .\36\/12--lap-and-up {
width: 50%;
}
.\31\/3--lap-and-up, .\34\/12--lap-and-up {
width: 33.33333%;
}
.\32\/3--lap-and-up, .\38\/12--lap-and-up {
width: 66.66667%;
}
.\31\/4--lap-and-up, .\33\/12--lap-and-up {
width: 25%;
}
.\33\/4--lap-and-up, .\39\/12--lap-and-up {
width: 75%;
}
.\31\/12--lap-and-up {
width: 8.33333%;
}
.\32\/12--lap-and-up {
width: 16.66667%;
}
.\35\/12--lap-and-up {
width: 41.66667%;
}
.\37\/12--lap-and-up {
width: 58.33333%;
}
.\31\30\/12--lap-and-up {
width: 83.33333%;
}
.\31\31\/12--lap-and-up {
width: 91.66667%;
}
}
#media #{$desk} {
.hidden-desk {
display: none !important;
}
.\31\/2--desk, .\32\/4--desk, .\36\/12--desk {
width: 50%;
}
.\31\/3--desk, .\34\/12--desk {
width: 33.33333%;
}
.\32\/3--desk, .\38\/12--desk {
width: 66.66667%;
}
.\31\/4--desk, .\33\/12--desk {
width: 25%;
}
.\33\/4--desk, .\39\/12--desk {
width: 75%;
}
.\31\/12--desk {
width: 8.33333%;
}
.\32\/12--desk {
width: 16.66667%;
}
.\35\/12--desk {
width: 41.66667%;
}
.\37\/12--desk {
width: 58.33333%;
}
.\31\30\/12--desk {
width: 83.33333%;
}
.\31\31\/12--desk {
width: 91.66667%;
}
}
/* Create each media query */
#media #{$widescreen} {
.hidden-widescreen {
display: none !important;
}
.\31\/2--widescreen, .\32\/4--widescreen, .\36\/12--widescreen {
width: 50%;
}
.\31\/3--widescreen, .\34\/12--widescreen {
width: 33.33333%;
}
.\32\/3--widescreen, .\38\/12--widescreen {
width: 66.66667%;
}
.\31\/4--widescreen, .\33\/12--widescreen {
width: 25%;
}
.\33\/4--widescreen, .\39\/12--widescreen {
width: 75%;
}
.\31\/12--widescreen {
width: 8.33333%;
}
.\32\/12--widescreen {
width: 16.66667%;
}
.\35\/12--widescreen {
width: 41.66667%;
}
.\37\/12--widescreen {
width: 58.33333%;
}
.\31\30\/12--widescreen {
width: 83.33333%;
}
.\31\31\/12--widescreen {
width: 91.66667%;
}
}
Hoping to understand the patterns for "\31" "\32" "\36" "\37", and hopefully a translation the first 12-grid declarations.
CSS identifiers, such as classes and IDs, cannot begin with a digit (0 - 9).
From the spec:
4.1.3 Characters and
case
In CSS, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [a-z, A-Z, 0-9] and ISO
10646 characters U+0080 and higher, plus the hyphen (-) and the
underscore (_); they cannot start with a digit, two hyphens, or a
hyphen followed by a digit.
However, the same section also says this:
Backslash escapes are always considered to be part of an identifier or a string.
This means that, while you cannot start an identifier with a digit, you can use backslash escape code (\foo) that will convert to a digit. Note that this rule applies in CSS, but not HTML, where almost any character combination is an acceptable value.
So that's what you're seeing in your code. Numerical HTML class values that must be escaped to work in CSS. Here are some examples:
\31 is the Unicode Code Point for the digit one.
\32 is the Unicode Code Point for the digit two.
\33 is the Unicode Code Point for the digit three.
Another purpose of the backslash escape in CSS is to cancel the meaning of special characters.
The forward slash (/) has special meaning in CSS. It must, therefore, be escaped for proper use.
So let's now decipher the class names in your code:
.\31\/2, .\32\/4, .\36\/12 { width: 50%; }
The first escape (\31) is Unicode for "1".
The second escape (\/2) cancels the special meaning of the forward slash.
So the HTML looks like this:
class = "1/2"
class = "2/4"
class = "6/12"
Here are a few more from your list:
.\31\/3, .\34\/12 { width: 33.33333%; } /* HTML class values = 1/3, 4/12 */
.\32\/3, .\38\/12 { width: 66.66667%; } /* HTML class values = 2/3, 8/12 */
.\31\/12 { width: 8.33333%; } /* HTML class value = 1/12 */
.\35\/12 { width: 41.66667%; } /* HTML class value = 5/12 */
.\31\30\/12 { width: 83.33333%; } /* HTML class value = 10/12 */
.\31\31\/12 { width: 91.66667%; } /* HTML class value = 11/12 */
from what I can gather with what I found online it's mostly escaping going on for some odd naming convention that from what I've read is probably not a great idea to begin with.
.\31\/2, .\32\/4, .\36\/12 { /* this */
.1/2, .2/4, .6/12 { /* translates to this */
width: 50%;
}
.\31\/3, .\34\/12 { /* this */
.1/3, .4/12 { /* translates to this */
width: 33.33333%;
}
I don't know if you've seen this article but the accepted answer breaks it down pretty well. after the \3 is like the start. then the \/ is escaping the slash.
What does .container.\31 25\25 mean in CSS?
Boostrap 3 comes with this:
#media (min-width: 1200px)
.container {
width: 1170px;
}
#media (min-width: 992px)
.container {
width: 970px;
}
#media (min-width: 768px)
.container {
width: 750px;
}
Can I freely add more min-width cases? what considerations should I have?
I want to have more cases between 1200px and, say, 1920px... because in a 1920px I end up having a container of 1170px and that sucks because it could be, say, 1300px
It's not as simple as that. Bootstrap 3 comes with 4 classes:
xs (extra small) 0-768
sm (small) 768-992
md (medium) 992-1200
lg (large) >1200
And the container class is linked to this classes, so if you want to have other stepps between this width's you must start with adding a new class for example: xxs (extra extra small) 0-384 (witch is not implemented in bootstrap right now), you have to add this classes:
.col-xxs-1, .col-xxs-2, .col-xxs-3, .col-xxs-4,
.col-xxs-5, .col-xxs-6, .col-xxs-7, .col-xxs-8,
.col-xxs-9, .col-xxs-10, .col-xxs-11, .col-xxs-12 {
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
#media (max-width: 384px) {
.col-xxs-1,
.col-xxs-2,
.col-xxs-3,
.col-xxs-4,
.col-xxs-5,
.col-xxs-6,
.col-xxs-7,
.col-xxs-8,
.col-xxs-9,
.col-xxs-10,
.col-xxs-11 {
float: left;
}
.col-xxs-1 {
width: 8.333333333333332%;
}
.col-xxs-2 {
width: 16.666666666666664%;
}
.col-xxs-3 {
width: 25%;
}
.col-xxs-4 {
width: 33.33333333333333%;
}
.col-xxs-5 {
width: 41.66666666666667%;
}
.col-xxs-6 {
width: 50%;
}
.col-xxs-7 {
width: 58.333333333333336%;
}
.col-xxs-8 {
width: 66.66666666666666%;
}
.col-xxs-9 {
width: 75%;
}
.col-xxs-10 {
width: 83.33333333333334%;
}
.col-xxs-11 {
width: 91.66666666666666%;
}
.col-xxs-12 {
width: 100%;
}
.col-xxs-push-1 {
left: 8.333333333333332%;
}
.col-xxs-push-2 {
left: 16.666666666666664%;
}
.col-xxs-push-3 {
left: 25%;
}
.col-xss-push-4 {
left: 33.33333333333333%;
}
.col-xxs-push-5 {
left: 41.66666666666667%;
}
.col-xxs-push-6 {
left: 50%;
}
.col-xxs-push-7 {
left: 58.333333333333336%;
}
.col-xxs-push-8 {
left: 66.66666666666666%;
}
.col-xxs-push-9 {
left: 75%;
}
.col-xxs-push-10 {
left: 83.33333333333334%;
}
.col-xxs-push-11 {
left: 91.66666666666666%;
}
.col-xxs-pull-1 {
right: 8.333333333333332%;
}
.col-xxs-pull-2 {
right: 16.666666666666664%;
}
.col-xxs-pull-3 {
right: 25%;
}
.col-xxs-pull-4 {
right: 33.33333333333333%;
}
.col-xxs-pull-5 {
right: 41.66666666666667%;
}
.col-xxs-pull-6 {
right: 50%;
}
.col-xxs-pull-7 {
right: 58.333333333333336%;
}
.col-xxs-pull-8 {
right: 66.66666666666666%;
}
.col-xxs-pull-9 {
right: 75%;
}
.col-xxs-pull-10 {
right: 83.33333333333334%;
}
.col-xxs-pull-11 {
right: 91.66666666666666%;
}
.col-xxs-offset-1 {
margin-left: 8.333333333333332%;
}
.col-xxs-offset-2 {
margin-left: 16.666666666666664%;
}
.col-xxs-offset-3 {
margin-left: 25%;
}
.col-xxs-offset-4 {
margin-left: 33.33333333333333%;
}
.col-xxs-offset-5 {
margin-left: 41.66666666666667%;
}
.col-xxs-offset-6 {
margin-left: 50%;
}
.col-xxs-offset-7 {
margin-left: 58.333333333333336%;
}
.col-xxs-offset-8 {
margin-left: 66.66666666666666%;
}
.col-xxs-offset-9 {
margin-left: 75%;
}
.col-xxs-offset-10 {
margin-left: 83.33333333333334%;
}
.col-xxs-offset-11 {
margin-left: 91.66666666666666%;
}
}
And also the container class you wrote:
#media (min-width: 384px)
.container {
width: 372px;
}
As you can see, it is very complicated, and it's recomanded not to use bootstrap if you want to customize it very very much.
when you need to use different break-points for container class, you may face 2 scenarios:
Scenario 1:
You know the breaking point. In this case, you can modify the SASS or LESS files, or simply create a customized version at http://getbootstrap.com/customize/#container-sizes
Scenario 2:
The breaking point is variable. In this case you use the class .container-fluid . This class can be (and is usually) used with container class in order to have some control of content inside, but the same way, you can create full screen layouts with a .semi-container class which is a somewhere between the .container class and the full width of the screen. Example:
<div class="container-fluid"><!-- full width -->
<div class="semi-container container-fluid"><!-- max-width -->
<div class="container"><!-- container -->
</div>
</div>
</div>
and then the CSS for .semi-container would be
.semi-container{max-width:1300px} /* or whatever you need */
Of course you can create more breakpoints etc. As long as you're not altering the bootstrap stylesheet it you won't affect the framework.
In reality you need to make cases for 320, 480, 600 etc... More than that.
In truth the bootstrap grid is only a starting point. I mean, come on - you can expect that everything under 768 deserves one rule.
As comprehensive as it is, bootstrap is still only supposed to be a starting point.
I've done tons of things like:
#media (max-width:480px) {
col-xs-4 {
width: 49.999%;
}
}
Anyone who tells you you can't needs a smack - just make sure to test what you've done.
Since your example only targets .container you're pretty safe. All the percentage based widths under it should work as expected.
I am using the 978.gs system in a site that I am creating but it is inserting a small band at the top of the page moving the content down slightly. I don't want this to happen.
The site in question is Located Here look at the top of the page.
and my CSS code is
/* Initiate 978.gs */
div.layout-978 { width: 978px; margin: 0px auto; }
div.row { height: 1%; }
div.row-end { clear: both; font: 1px/1px sans-serif; height: 1px; overflow: hidden; }
div.col1, div.col2, div.col3, div.col4, div.col5, div.col6, div.col7, div.col8, div.col9, div.col10, div.col11, div.col12 { float: left; margin-left: 30px; }
div.col1:first-child, div.col2:first-child, div.col3:first-child, div.col4:first-child, div.col5:first-child, div.col6:first-child, div.col7:first-child, div.col8:first-child, div.col9:first-child, div.col10:first-child, div.col11:first-child, div.col12:first-child { margin-left: 0px; }
div.col1 { width: 54px; }
div.col2 { width: 138px; }
div.col3 { width: 222px; }
div.col4 { width: 306px; }
div.col5 { width: 390px; }
div.col6 { width: 474px; }
div.col7 { width: 558px; }
div.col8 { width: 642px; }
div.col9 { width: 726px; }
div.col10 { width: 810px; }
div.col11 { width: 894px; }
div.col12 { width: 978px; }
/* Main CSS */
body{
background: url('img/bg-texture.jpg');
position:relative;
}
Solution:
To fix this problem I edited the following css entry
body{
background: url('img/bg-texture.jpg');
position:relative;
margin-top:0px;
}
I am making a web for desktop, tablet and mobile screens. For this I am using css media queries. When I test my website on desktop browser and when I scale my web bowser down then it does change its layout when it reaches to max-width 740px as mentioned in css. But the problem is when I test this on my mobile then it does not change its layout to fit mobile screens.
I am using 12 columns layout system and using less css. Please help me why it does not change its layout on mobile phones to fit mobile screens.
Here is my css or less css to be precise
html, body {
height: 100%;
//overflow: hidden;
}
body {
min-width: 360px;
background-color: #ffffff;
#page {
width: 100%;
height: 100%;
overflow: auto;
}
.right {
position: relative;
right: 0;
}
// Extend column system (from defaults/layout.css)
.row {
clear: both;
> .container {
max-width: 1024px;
margin: 0 auto;
padding: 0 2% 0 2%;
.container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
&.one {
width: 8%;
}
&.two {
width: 16%;
}
&.three {
width: 25%;
}
&.four {
width: 33%;
}
&.five {
width: 41%;
}
&.six {
width: 50%;
}
&.seven {
width: 58%;
}
&.eight {
width: 66%;
}
&.nine {
width: 75%;
}
&.ten {
width: 83%;
}
&.eleven {
width: 91%;
}
&.twelve {
width: 100%;
}
}
}
}
}
/*Collapse columns*/
#media only screen and (max-width: 740px) {
.column, .column.one, .column.two, .column.three, .column.four, .column.five, .column.six, .column.eight, .column.nine, .column.ten, .column.eleven, .column.twelve,
.column.close-right, .column.one.close-right, .column.two.close-right, .column.three.close-right, .column.four.close-right, .column.five.close-right, .column.six.close-right, .column.eight.close-right, .column.nine.close-right, .column.ten.close-right, .column.eleven.close-right, .column.twelve.close-right {
//width: auto;
//float: none;
//clear: both;
margin-right: 0;
}
.column.third {
display: none;
}
.column.second {
width: 77%;
}
.column.first {
//min-width: 180px;
}
}
Try adding this to the top of your HTML page:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
That should let the mobile browser know that the page you be rendered at the size of your device/browser, instead of faking the screen size of a desktop computer (and thus confusing your media queries).
http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/
I am working on a blog for a client. The header at the very top has an HTML comment in it that I can't figure out how to get rid of.
Here is the URL: http://www.erinkathleendunn.com/
Here is the source code around the area:
<![CDATA[
body {
min-width: $(content.width);
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}
.main-inner .columns {
padding-left: $(main.column.left.width);
padding-right: $(main.column.right.width);
}
.main-inner .fauxcolumn-center-outer {
left: $(main.column.left.width);
right: $(main.column.right.width);
/* IE6 does not respect left and right together */
_width: expression(this.parentNode.offsetWidth -
parseInt("$(main.column.left.width)") -
parseInt("$(main.column.right.width)") + 'px');
}
.main-inner .fauxcolumn-left-outer {
width: $(main.column.left.width);
}
.main-inner .fauxcolumn-right-outer {
width: $(main.column.right.width);
}
.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}
#layout {
min-width: 0;
}
#layout .content-outer {
min-width: 0;
width: 800px;
}
#layout .region-inner {
min-width: 0;
width: auto;
}
]]>
</b:template-skin>
</head>
<body expr:class='"loading" + data:blog.mobileClass'>
<div class='body-fauxcolumns'>
<div class='fauxcolumn-outer body-fauxcolumn-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
I can see --> at the top of the blog. Is that what you want to remove ?
If yes, then Open your source code and search for --> for in you HTML and remove that.
This will work.
The problem lies in between the code of the "Mobile stylesheet". This is the portion of your code that is causing the problem:
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-left: 1px solid #dddddd;
}
</style>
--></style> (Remove this)
<style id='template-skin-1' type='text/css'><!--
This is on line 471 of the page. Also, you're closing the style tag 2 times here. The code is a bit messy. Try validating via http://validator.w3.org if you want to improve it overall.