Html css properties not working

Hello shotstack team,

Great product !!

I am having an issue with some css properties (paddings, borders). Looks like they are getting ignored.
Margins, Font size, Color, Backgound color works fine.

Any idea what am I missing?

JSON:

{
  "output": {
    "format": "mp4",
    "resolution": "mobile"
  },
  "timeline": {
    "background": "#000000",
    "tracks": [
      {
        "clips": [
          {
            "start": 1,
            "length": 5,
            "position": "center",
            "asset": {
              "height": 60,
              "html": "<div>Ράδιο Αρβύλα: Κανονικά στον αέρα η εκπομπή σήμερα</div>",
              "css": "div { background-color: #fff; border-left: 5px solid #0047ff; padding: 50px; text-align: left; color: #000; font-size: 20px; }",
              "type": "html",
              "background": "#FF0000"
            },
            "transition": {
              "in": "slideUp",
              "out": "slideDown"
            }
          },
          {
            "start": 0,
            "length": 6,
            "asset": {
              "type": "image",
              "src": "https://youfly.com/wp-content/uploads/2021/12/antonis-kanakis-radio-arvila.jpg"
            },
            "transition": {
              "in": "fade"
            },
            "effect": "zoomInSlow"
          },
          {
            "asset": {
              "type": "luma",
              "src": "https://cdn.orangeclickmedia.com/videos/transition1_5.mp4"
            },
            "start": 5,
            "length": 1
          }
        ]
      },
      {
        "clips": [
          {
            "start": 6,
            "length": 5,
            "position": "center",
            "asset": {
              "height": 60,
              "html": "<div>Η Γη της Ελιάς: Πόλεμος ανάμεσα σε Κωνσταντίνο και Δημήτρη</div>",
              "css": "div { background-color: #fff; border-left: 5px solid #0047ff; padding: 50px; text-align: left; color: #000; font-size: 20px; }",
              "type": "html",
              "background": "#FF0000"
            },
            "transition": {
              "in": "slideUp",
              "out": "slideDown"
            }
          },
          {
            "start": 5,
            "length": 6,
            "asset": {
              "type": "image",
              "src": "https://youfly.com/wp-content/uploads/2021/12/dimitris-konstantinos-gi-tis-elias-1.jpg"
            },
            "transition": {
              "in": "fade"
            },
            "effect": "zoomInSlow"
          },
          {
            "asset": {
              "type": "luma",
              "src": "https://cdn.orangeclickmedia.com/videos/transition1_5.mp4"
            },
            "start": 10,
            "length": 1
          }
        ]
      },
      {
        "clips": [
          {
            "start": 11,
            "length": 5,
            "position": "center",
            "asset": {
              "height": 60,
              "html": "<div>Παρέλαση αστέρων τον Δεκέμβριο στη μικρή οθόνη</div>",
              "css": "div { background-color: #fff; border-left: 5px solid #0047ff; padding: 50px; text-align: left; color: #000; font-size: 20px; }",
              "type": "html",
              "background": "#FF0000"
            },
            "transition": {
              "in": "slideUp",
              "out": "slideDown"
            }
          },
          {
            "start": 10,
            "length": 6,
            "asset": {
              "type": "image",
              "src": "https://youfly.com/wp-content/uploads/2021/12/cosmote-tv-seires-dekemvrios.jpg"
            },
            "transition": {
              "in": "fade"
            },
            "effect": "zoomInSlow"
          },
          {
            "asset": {
              "type": "luma",
              "src": "https://cdn.orangeclickmedia.com/videos/transition1_5.mp4"
            },
            "start": 15,
            "length": 1
          }
        ]
      },
      {
        "clips": [
          {
            "start": 16,
            "length": 5,
            "position": "center",
            "asset": {
              "height": 60,
              "html": "<div>Πάνος Νάτσης – Σέρρες: Ο ηθοποιός μιλάει για τον ρόλο του στην σειρά</div>",
              "css": "div { background-color: #fff; border-left: 5px solid #0047ff; padding: 50px; text-align: left; color: #000; font-size: 20px; }",
              "type": "html",
              "background": "#FF0000"
            },
            "transition": {
              "in": "slideUp",
              "out": "slideDown"
            }
          },
          {
            "start": 15,
            "length": 6,
            "asset": {
              "type": "image",
              "src": "https://youfly.com/wp-content/uploads/2021/12/panos-natshs-kentrikh-foto.jpg"
            },
            "transition": {
              "in": "fade"
            },
            "effect": "zoomInSlow"
          },
          {
            "asset": {
              "type": "luma",
              "src": "https://cdn.orangeclickmedia.com/videos/transition1_5.mp4"
            },
            "start": 20,
            "length": 1
          }
        ]
      },
      {
        "clips": [
          {
            "start": 21,
            "length": 5,
            "position": "center",
            "asset": {
              "height": 60,
              "html": "<div>Η Γη της Ελιάς: Η Ιουλία αρνείται να βάλει το μονόπετρο του Κουράκου</div>",
              "css": "div { background-color: #fff; border-left: 5px solid #0047ff; padding: 50px; text-align: left; color: #000; font-size: 20px; }",
              "type": "html",
              "background": "#FF0000"
            },
            "transition": {
              "in": "slideUp",
              "out": "slideDown"
            }
          },
          {
            "start": 20,
            "length": 6,
            "asset": {
              "type": "image",
              "src": "https://youfly.com/wp-content/uploads/2021/12/ioulia-kourakos-gi-tis-elias-1.jpg"
            },
            "transition": {
              "in": "fade"
            },
            "effect": "zoomInSlow"
          },
          {
            "asset": {
              "type": "luma",
              "src": "https://cdn.orangeclickmedia.com/videos/transition1_5.mp4"
            },
            "start": 25,
            "length": 1
          }
        ]
      },
      {
        "clips": [
          {
            "start": 26,
            "length": 5,
            "position": "center",
            "asset": {
              "height": 60,
              "html": "<div>Έξι νύχτες στην Ακρόπολη: Πρεμιέρα για τη νέα σειρά της ΕΡΤ</div>",
              "css": "div { background-color: #fff; border-left: 5px solid #0047ff; padding: 50px; text-align: left; color: #000; font-size: 20px; }",
              "type": "html",
              "background": "#FF0000"
            },
            "transition": {
              "in": "slideUp",
              "out": "slideDown"
            }
          },
          {
            "start": 25,
            "length": 6,
            "asset": {
              "type": "image",
              "src": "https://youfly.com/wp-content/uploads/2021/12/exi-nyxtes-sthn-akropoli-premiera.jpg"
            },
            "transition": {
              "in": "fade"
            },
            "effect": "zoomInSlow"
          },
          {
            "asset": {
              "type": "luma",
              "src": "https://cdn.orangeclickmedia.com/videos/transition1_5.mp4"
            },
            "start": 30,
            "length": 1
          }
        ]
      },
      {
        "clips": [
          {
            "start": 31,
            "length": 5,
            "position": "center",
            "asset": {
              "height": 60,
              "html": "<div>Άγριες Μέλισσες: Η Μυρσίνη το παίζει νέο αφεντικό στο εργοστάσιο</div>",
              "css": "div { background-color: #fff; border-left: 5px solid #0047ff; padding: 50px; text-align: left; color: #000; font-size: 20px; }",
              "type": "html",
              "background": "#FF0000"
            },
            "transition": {
              "in": "slideUp",
              "out": "slideDown"
            }
          },
          {
            "start": 30,
            "length": 6,
            "asset": {
              "type": "image",
              "src": "https://youfly.com/wp-content/uploads/2021/12/agries-melisses-epomena-epeisodia-doukas-mirsini-1.jpg"
            },
            "transition": {
              "in": "fade"
            },
            "effect": "zoomInSlow"
          },
          {
            "asset": {
              "type": "luma",
              "src": "https://cdn.orangeclickmedia.com/videos/transition1_5.mp4"
            },
            "start": 35,
            "length": 1
          }
        ]
      },
      {
        "clips": [
          {
            "start": 36,
            "length": 5,
            "position": "center",
            "asset": {
              "height": 60,
              "html": "<div>ANT1: Χωρίς Ράδιο Αρβύλα σήμερα – Τι θα γίνει τις επόμενες μέρες</div>",
              "css": "div { background-color: #fff; border-left: 5px solid #0047ff; padding: 50px; text-align: left; color: #000; font-size: 20px; }",
              "type": "html",
              "background": "#FF0000"
            },
            "transition": {
              "in": "slideUp",
              "out": "slideDown"
            }
          },
          {
            "start": 35,
            "length": 6,
            "asset": {
              "type": "image",
              "src": "https://youfly.com/wp-content/uploads/2021/12/radio-arvyla-xoris-shmera-scaled.jpeg"
            },
            "transition": {
              "in": "fade"
            },
            "effect": "zoomInSlow"
          },
          {
            "asset": {
              "type": "luma",
              "src": "https://cdn.orangeclickmedia.com/videos/transition1_5.mp4"
            },
            "start": 40,
            "length": 1
          }
        ]
      },
      {
        "clips": [
          {
            "start": 41,
            "length": 5,
            "position": "center",
            "asset": {
              "height": 60,
              "html": "<div>Σκοτεινή Θάλασσα: Γιατί επιλέχθηκε το Μεσολόγγι για τα γυρίσματα;</div>",
              "css": "div { background-color: #fff; border-left: 5px solid #0047ff; padding: 50px; text-align: left; color: #000; font-size: 20px; }",
              "type": "html",
              "background": "#FF0000"
            },
            "transition": {
              "in": "slideUp",
              "out": "slideDown"
            }
          },
          {
            "start": 40,
            "length": 6,
            "asset": {
              "type": "image",
              "src": "https://youfly.com/wp-content/uploads/2021/12/skoteini-thalassa-mega-2.jpg"
            },
            "transition": {
              "in": "fade"
            },
            "effect": "zoomInSlow"
          },
          {
            "asset": {
              "type": "luma",
              "src": "https://cdn.orangeclickmedia.com/videos/transition1_5.mp4"
            },
            "start": 45,
            "length": 1
          }
        ]
      },
      {
        "clips": [
          {
            "start": 46,
            "length": 5,
            "position": "center",
            "asset": {
              "height": 60,
              "html": "<div>Survivor: Ανατροπή με την πρεμιέρα – Η νέα ημερομηνία</div>",
              "css": "div { background-color: #fff; border-left: 5px solid #0047ff; padding: 50px; text-align: left; color: #000; font-size: 20px; }",
              "type": "html",
              "background": "#FF0000"
            },
            "transition": {
              "in": "slideUp",
              "out": "slideDown"
            }
          },
          {
            "start": 45,
            "length": 6,
            "asset": {
              "type": "image",
              "src": "https://youfly.com/wp-content/uploads/2021/12/survivor-imerominia-premiera.jpg"
            },
            "transition": {
              "in": "fade"
            },
            "effect": "zoomInSlow"
          },
          {
            "asset": {
              "type": "luma",
              "src": "https://cdn.orangeclickmedia.com/videos/transition1_5.mp4"
            },
            "start": 50,
            "length": 0
          }
        ]
      }
    ]
  }
}

Hello and thanks for the compliment.

From your JSON, it looks like you are trying to do something like this: Expanding lower third video template — Shotstack

This will create an expanding container with a coloured bar on the left hand side. This technique actually uses tables and table cells.

The HTML and CSS within Shotstack has a number of limitations but the table approach seems pretty flexible for creating borders and bars.

If this isn’t what you are looking for let us know and we can investigate other workarounds.

1 Like

Hello @lucas.spielberg,

Thank you for your time. Table approach works!

1 Like