Copy link to clipboard
Copied
Hello,
One of those problems that you keep looking at but can't see the answer when to someone else it'l lbe pretty obvious I hope!
There is a video gallery at the bottom of this site http://bit.ly/35JmVIJ which works fine on desktop and seems fine until it gets down to mobile width, at which point a few gaps appear above it, the gallery collapses and the footer strangerly looses it's background colour and the images in the footer range left instead of being central.
I've attached a couple of screenshots which giev an idea of what is going on, hopefully they'll be of use.
Any help gratefully received!
You have 3 errors in your 'v6styles.css' stylesheet. Put those right and your video gallery will show as you want it to.
1) You have a comma instead of an opening bracket:
h1, { /* MISSING OPENING BRACKET - REMOVE COMMA BEFORE h1*/
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the side
Copy link to clipboard
Copied
I assume you're concerned about the vertically stacked and truncated video content as shown in my screenshot below.
Start with your code errors. Fix the critical ones first as they can adversely effect how browsers read & display pages.
https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.simontgraphicdesign.co.uk%2F
Copy link to clipboard
Copied
You are correct Nancy!
I have now fixed those critical errors (latest reports mentions alt tags but they're now taken care of)
Copy link to clipboard
Copied
You have 3 errors in your 'v6styles.css' stylesheet. Put those right and your video gallery will show as you want it to.
1) You have a comma instead of an opening bracket:
h1, { /* MISSING OPENING BRACKET - REMOVE COMMA BEFORE h1*/
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
2) You have a missing closing bracket:
Media@mercycity.church (min-width: 568px) {
.contactleft {
float: left;
width: 48%;
margin-right: 20px;
}
} /* MISSING CLOSING BRACKET */
3) You have a missing closing bracket:
Media@mercycity.church (min-width: 568px) {
.contactright {
float: right;
width: 50%;
}
} /* MISSING CLOSING BRACKET */
Copy link to clipboard
Copied
As you have been before, you're a legend and a gent Osgood – thanks very much for that, just couldn't spot where the problem with the coding was
Thanks very much to yourself and Nancy for the help on this!
Copy link to clipboard
Copied
You're using DW to code css files, right? Those simple syntax errors should be marked directly or indirectly with "red" line numbers at the code view. That's what I check first if some specific styling doesn't get expected outcome.