1
0 Comments

Promotional Header Banner Using Container

Intro

Adapting https://smalltowndreamer.co.uk to have a clickable promo banner at top like CeruleanSounds.com.

Preview (will transfer Wednesday):
https://smalltowndreamerdraft.carrd.co
user: guest | pw: test

Changes Made

Page

Set Max Width to 100.
Original:
pic
Remove vertical padding & margins.
Margins also affects the other three sides:

Horiztonals

In response you have to: increase horizontal padding. Though, above 2 it doesn't seem to make any difference.

Bottom

Add a "Spacer": i.e. a Blank Container with e.g. max (12) height

Container

Also set Width to Max and Remove Vertical Padding & Margins.
Remove Horizontal Padding too.

Questions

  1. When can you recreate the effects of margins with padding?
  2. Is it possible to make the entire Container clickable? e.g. with CSS Property?

Feel free to throw me any other feedback you have on this site (it's for my debut album so really important for me). It's based around AirTable embeds, but they become very narrow on mobile.

Trending on Indie Hackers
26 B2B Cold Outreach Templates - all for free... 🤝🏾 20 comments I Bought a Year of Time for $200,000 16 comments Businesses launched by solo founders are more successful than those launched by multiple founders (research) 10 comments Launched PH: SwipeTwitch – today! 9 comments I acquired Upmostly (React JS Tutorial Website): The Plan and Looking for Help! 6 comments Notion dashboard to ideate, order and source your next product! Looking for a few users to beta test. Comment below and I'll send you a link 5 comments