Help with custom page css or full width for a SPECIFIC page (Dawn Theme)

bandg · ‎03-01-2025

Hi, I've been at this for a while now and need help!

What I want to do: Create responsive rows of 5 column cards on a custom page. I'm pulling this page into another page under collapsible content. It looks nice on the collapsible content page however as a standalone page it looks really bad.

Collapsible content (photography tab): https://boneandgrey.com/pages/partners
Standalone page (custom css): https://boneandgrey.com/pages/bone-grey-bridal-photography-partners-asia (it looks so squished and the bottom is being cut off plus the instagram icon is not shown on the standalone page for som reason)

My hypothesis is because the standalone page width is too small or something is wrong with my custom CSS, please help!

Custom CSS below:

<body>


<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}


/* Float four columns side by side */
.column {
  float: left;
  width: 20%;
  height: 850px;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 0px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 750px) {
  .column {
    width: 100%;
    height: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.card {
  padding: 10px;
  text-align: center;
  background-color:#f3f3f3;
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
}

button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 15px;
  font-color: #ffffff;
  background-color: #EBE9E3;
  text-align: center;
  width: 100%;
  font-size: 16px;
}

a {
  text-decoration: none;
  font-size: 16px;
  color: black;
}

button:hover, a:hover {
  opacity: 0.7;
}
</style>



<div class="row">
  <div class="column">
    <div class="card">
      <a href="https://bottledgroovephoto.com/" target="_blank"> <img src="https://cdn.shopify.com/s/files/1/0750/3832/7081/files/BT_Groove_Logo_dark_grey.png?v=1703234185" alt="Bottled Groove Photography | Bone and Grey Bridal Photography Partners in Asia" style="width: 200px; height: 200px;"></a>
<h2>Bottled Groove Photography</h2>
<p>Singapore</p>
<p><i>We believe that everyone should embrace the messiness of a wedding day. Let us document these future memories for you.</i></p>
<p><b>Perk</b>:<br>5% off any service, not applicable with any other discounts.</p>
<div style="margin: 24px 0;">
<a href="https://www.instagram.com/bottledgroovephoto/" target="_blank"><i class="fa fa-instagram"></i></a><br>
</div>
<p><button><a href="https://bottledgroovephoto.com/" style="text-color: white;" target="_blank">Contact</a></button></p>
    </div>
  </div>

  <div class="column">
    <div class="card">
     <a href="https://www.jiwaphotography.com/" target="_blank"> <img src="https://cdn.shopify.com/s/files/1/0750/3832/7081/files/Jiwa-logo-square.png?v=1702706450" alt="Jiwa Photography | Bone and Grey Bridal Photography Partners in Asia" style="width: 200px; height: 200px;"></a>
<h2>Jiwa Photography</h2>
<p>Singapore / Bali, Indonesia</p>
<p><i>JIWA Photography is destination wedding photographers based in Bali and Singapore whose style combines fine art and photojournalism.</i></p>
<p><b>Perk</b>:<br>Complimentary 1hr casual photoshoot session with any package signed up (worth SGD $350).</p>
<div style="margin: 24px 0;">
<a href="https://www.instagram.com/jiwaphotography/" target="_blank"><i class="fa fa-instagram"></i></a><br>
</div>
<p><button><a href="https://www.jiwaphotography.com/" style="text-color: white;" target="_blank">Contact</a></button></p>
    </div>
  </div>
  
  <div class="column">
    <div class="card">
     <a href="https://www.photorikiki.com/" target="_blank"><img src="https://cdn.shopify.com/s/files/1/0750/3832/7081/files/Square_Email_Blog_Post_Banners.png?v=1737023509" alt="Photo Rikiki | Bone and Grey Bridal Photography Partners in Asia" style="width: 200px; height: 200px;"></a>
<h2>Photo Rikiki</h2>
<p>Singapore</p>
<p><i>Timeless, ethereal images you can feel by Shiwen Huang, a documentary style photographer who is drawn to the emotion, light and movement of a celebration.</i></p>
<p><b>Perk</b>:<br>20% off engagement sessions and wedding day photography.</p>
<div style="margin: 24px 0;">
<a href="https://www.instagram.com/photorikiki/" target="_blank"><i class="fa fa-instagram"></i></a><br>
</div>
<p><button><a href="https://www.photorikiki.com/" style="text-color: white;" target="_blank">Contact</a></button></p>
    </div>
  </div>
  
  <div class="column">
    <div class="card">
     <a href="http://www.joellecq.co/" target="_blank"><img src="https://cdn.shopify.com/s/files/1/0750/3832/7081/files/joellecq-2024-logotype-black.png?v=1729063116" alt="Joelle Cecilia | Bone and Grey Bridal Photography Partners in Asia" style="width: 200px; height: 200px;"></a>
<h2>Joelle Cecilia</h2>
<p>Singapore</p>
<p><i>Editorial and documentary wedding photographer Joelle Cecilia uses her background in fashion and media communications to achieve an elegant, authentic, and evocative style.</i></p>
<p><b>Perk</b>:<br>10% off total bill, excluding last-minute charges.</p>
<div style="margin: 24px 0;">
<a href="http://instagram.com/joellecq.co" target="_blank"><i class="fa fa-instagram"></i></a><br>
</div>
<p><button><a href="http://www.joellecq.co/" style="text-color: white;" target="_blank">Contact</a></button></p>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <a href="https://www.withtwentytwo.com/" target="_blank"><img src="https://cdn.shopify.com/s/files/1/0750/3832/7081/files/w22logo_black_medium_59f47804-8402-4ce2-aa5e-53e9ee569ec1.png?v=1731379922" alt="With Twenty Two Photography | Bone and Grey Bridal Photography Partners in Asia" style="width: 200px; height: 200px;"></a>
<h2>With Twenty Two Photography</h2>
<p>Singapore</p>
<p><i>Life’s more fun in the silly &amp; folly. We believe the best images are created through authenticity, intimacy and intentionality.</i></p>
<p><b>Perk</b>:<br>5% off services excl. last-minute add-ons &amp; cannot be combined with discounts.</p>
<div style="margin: 24px 0;">
<a href="https://www.instagram.com/withtwentytwo" target="_blank"><i class="fa fa-instagram"></i></a><br>
</div>
<p><button><a href="https://www.withtwentytwo.com/" style="text-color: white;" target="_blank">Contact</a></button></p>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <a href="https://www.canva.com/design/DAGFHiX-Gi4/EMZNh7GJtOqMIk1yi14rUg/edit" target="_blank"><img src="https://cdn.shopify.com/s/files/1/0750/3832/7081/files/TWC_Logo.png?v=1737023532" alt="The WKND Creatives | Bone and Grey Bridal Photography Partners in Asia" style="width: 200px; height: 200px;"></a>
<h2>The WKND Creatives</h2>
<p>Singapore</p>
<p><i>Celebrating love in your element.</i></p>
<p><b>Perk</b>:<br>$150 off all Actual Day Packages above 8hrs of service.</p>
<div style="margin: 24px 0;">
<a href="https://www.instagram.com/thewkndcreatives/" target="_blank"><i class="fa fa-instagram"></i></a><br>
</div>
<p><button><a href="https://www.canva.com/design/DAGFHiX-Gi4/EMZNh7GJtOqMIk1yi14rUg/edit" style="text-color: white;" target="_blank">Contact</a></button></p>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <a href="https://www.instagram.com/liangzuo_studio/" target="_blank"><img src="https://cdn.shopify.com/s/files/1/0750/3832/7081/files/logo_4.png?v=1737024238" alt="Liangzuo Studio | Bone and Grey Bridal Photography Partners in Asia" style="width: 200px; height: 200px;"></a>
<h2>Liangzuo Studio</h2>
<p>Singapore</p>
<p><i>Every couple deserves something special, and that’s exactly what we aim to deliver.</i></p>
<p><b>Perk</b>:</p>
<div style="margin: 24px 0;">
<a href="https://www.instagram.com/liangzuo_studio/" target="_blank"><i class="fa fa-instagram"></i></a><br>
</div>
<p><button><a href="https://www.instagram.com/liangzuo_studio/" style="text-color: white;" target="_blank">Contact</a></button></p>
    </div>
  </div>
   <div class="column">
    <div class="card">
     <a href="https://www.revelrycollective.net/" target="_blank"><img src="https://cdn.shopify.com/s/files/1/0750/3832/7081/files/3.png?v=1702373747" alt="Revelry Collective | Bone and Grey Bridal Photography Partners in Asia" style="width: 200px; height: 200px;"></a>
<h2>Revelry Collective</h2>
<p>Singapore</p>
<p><i>Here for your happy moments and the emotional ones, Qi Hui is always on the lookout for the nuances that you will miss on your hectic wedding day. </i></p>
<p><b>Perk</b>:<br>5% off any wedding photography services.</p>
<div style="margin: 24px 0;">
<a href="https://www.instagram.com/revelry.collective/" target="_blank"><i class="fa fa-instagram"></i></a><br>
</div>
<p><button><a href="https://www.revelrycollective.net/" style="text-color: white;" target="_blank">Contact</a></button></p>
    </div>
  </div>
   <div class="column">
    <div class="card">
      <a href="https://www.forloverco.com/" target="_blank"><img src="https://cdn.shopify.com/s/files/1/0750/3832/7081/files/Forlover_Co_new_branding_2025.jpg?v=1737366705" alt="Forlover Co | Bone and Grey Bridal Photography Partners in Asia" style="width: 200px; height: 200px;"></a>
<h2>Forlover Co</h2>
<p>Singapore</p>
<p><i>Forlover, a curator of timeless romance. Their artistry is grounded in a deep love for aesthetics, capturing moments that speak volumes and last a lifetime.</i></p>
<p><b>Perk</b>:<br>5% off actual day bookings</p>
<div style="margin: 24px 0;">
<a href="https://www.instagram.com/forloverco" target="_blank"><i class="fa fa-instagram"></i></a><br>
</div>
<p><button><a href="https://www.forloverco.com/" style="text-color: white;" target="_blank">Contact</a></button></p>
    </div>
  </div>
</div>



</body>

Shadab_dev · ‎03-06-2025

The entire section which displays your cards is actually not taking full width due to this class on the main-div section page-width--narrow. Just remove that class or change target that div with this class or any class just target the div that has this class and play around with the max-width or width property.

Buy me Coffee, if you feel i was helpful. Email Me here or WhatsApp me with this link for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.

Help with custom page css or full width for a SPECIFIC page (Dawn Theme)

Help with custom page css or full width for a SPECIFIC page (Dawn Theme)

Community Blog Articles