Skip to main content
H
hourtayter
Known Participant
January 14, 2021
Answered

Video gallery not collapsing to mobile size properly

  • January 14, 2021
  • 2 replies
  • 769 views

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!

 

    This topic has been closed for replies.
    Correct answer osgood_

    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:

     

    @217338 (min-width: 568px) {
    .contactleft {
    float: left;
    width: 48%;
    margin-right: 20px;
    }

    } /* MISSING CLOSING BRACKET */

     

     

    3) You have a missing closing bracket:

     

    @217338 (min-width: 568px) {
    .contactright {
    float: right;
    width: 50%;
    }

     } /* MISSING CLOSING BRACKET */

    2 replies

    O
    osgood_Correct answer
    Legend
    January 15, 2021

    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:

     

    @217338 (min-width: 568px) {
    .contactleft {
    float: left;
    width: 48%;
    margin-right: 20px;
    }

    } /* MISSING CLOSING BRACKET */

     

     

    3) You have a missing closing bracket:

     

    @217338 (min-width: 568px) {
    .contactright {
    float: right;
    width: 50%;
    }

     } /* MISSING CLOSING BRACKET */

      H
      hourtayterAuthor
      Known Participant
      January 15, 2021

      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
      toshi_esumi
      Inspiring
      January 16, 2021

      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.

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      January 14, 2021

      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

       

      Nancy O'Shea— Product User & Community Expert
        H
        hourtayterAuthor
        Known Participant
        January 15, 2021

        You are correct Nancy!

         

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

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices