Video gallery not collapsing to mobile size properly

[hourtayter]

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!

[Nancy OShea]

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

[hourtayter]

You are correct Nancy!

I have now fixed those critical errors (latest reports mentions alt tags but they're now taken care of)

[osgood_ · Accepted solution]

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 */

[hourtayter]

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!

[toshi_esumi]

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.