CODEWITHSUNDEEP
htmlcssbigcartel
Finding Colors
Finding Colors

Reputation: 41

How Do I Make the Homepage Full Width - Roadie Theme?

I am currently using the "Fixed width" layout option on the Roadie theme. I have custom coding on the homepage and would like to make just the HOME PAGE full width. How do I make JUST THE HOME PAGE full width?

The "Fix width" option has a fixed width of 1056px (which I want throughout the rest of the theme - just not the homepage.

.outer-wrapper.fixed-width {
  max-width: 1024px;
}

<div class="outer-wrapper fixed-width">

How it looks (fixed-width): https://ibb.co/S3T1j4Q

How I Want it to look: https://ibb.co/5jFcKdV

.feat-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.feat-item {
  width: 1050px;
  min-height: 250px;
  background: #EFF9FA;
  padding: 20px;
  border-radius: 50px;
  box-sizing: border-box;
  color: #141414;
  margin: 4% auto;
}

.feat-img {
  float: left;
  margin-right: 20px;
}

.feat-img img {
  border-radius: 50px;
}

.feat-title {
  font-family: 'shine';
  color: #B2DCDE;
  margin-top: 20px;
  font-size: 30px;
  text-align: center;
  text-transform: none;
  margin-bottom: 30px;
}

.item-title {
  font-size: 20px;
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 15px;
  color: #514A40;
}

.feat-content {
  font-size: 16px;
  letter-spacing: 0.5px;
  line-height: 1.5;
  margin-top: 15px;
  color: #514A40;
}

.feat-button a {
  font-size: 16px;
  font-weight: bold;
  color: #716557;
  margin-top: 35px;
  padding: 10px 15px;
  background: #b1dcdd;
  text-align: center;
  border-radius: 50px;
  text-decoration: none;
}

.feat-button a:hover {
  color: #90867a;
}

.feat-button {
  margin-top: 45px;
  margin-bottom: 10px;
  text-align: center;
}

@media only screen and (max-width: 700px) {
  .feat-img {
    margin-left: 2%;
    margin-bottom: 20px;
  }
  .feat-item {
    margin-left: 0 auto;
    width: 90%;
  }
  .feat-title {
    font-size: 20px;
  }
}


/* ---- Shop By Category ---- */

.categories {
  background: #FDF3F0;
  width: 100%;
  padding-bottom: 50px;
  margin-top: 15px;
}

.title-red {
  padding-top: 60px;
  text-align: center;
  color: #F48770;
  font-size: 30px;
  font-family: 'shine';
}

.categories-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
}

.category {
  max-width: 240px;
  min-height: 250px;
  box-sizing: border-box;
  margin-top: 20px;
  margin-right: 20px;
  margin-left: 20px;
}

.category img {
  border-radius: 50px;
}

.cat-button {
  text-align: center;
  margin-top: 20px;
  width: 240px!important;
  background: #F48971;
  border-radius: 50px;
  padding: 10px 0px;
}

.cat-button a {
  color: #433D34;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
}

.cat-button a:hover {
  color: #514A40;
}


/* ---- Newsletter ---- */

.newsletter {
  background: #FEFCFC;
  width: 100%;
  padding-bottom: 50px;
  margin-top: 30px;
}

.title-yellow {
  padding-top: 40px;
  text-align: center;
  color: #F6C06A;
  font-size: 30px;
  font-family: 'shine';
  margin-bottom: 20px;
}
<div class="feat-wrapper">
  <div class="feat-item">
    <div class="feat-img"><img src="https://via.placeholder.com/280"></div>
    <h3 class="feat-title">Featured Item}</h3>
    <div class="item-title">Brown Cow Sticker</div>
    <p class="feat-content"> This cute cow sticker is perfect for spicing up your scrapbook, laptop, journals, phone case and more. Stickers also make a great gift!</p>
    <div class="feat-button"><a href="#">SHOP NOW</a></div>
  </div>
</div>

<div class="categories">
  <div class="title-red">Shop By Category}</div>
  <div class="categories-wrapper">
    <div class="category">
      <img src="https://via.placeholder.com/240">
      <div class="cat-button"><a href="#">Stickers</a></div>
    </div>
    <div class="category">
      <img src="https://via.placeholder.com/240">
      <div class="cat-button"><a href="#">Bookmarks</a></div>
    </div>
    <div class="category">
      <img src="https://via.placeholder.com/240">
      <div class="cat-button"><a href="#">Notepads</a></div>
    </div>
  </div>
</div>

<div class="newsletter">
  <div class="title-yellow">Newsletter Sign Up}</div>

  <div style="text-align: center" class="sender-form-field" data-sender-form-id="l2hxlxknbkdvydaosnm"></div>

</div>

Upvotes: 0

Views: 89

Answers (1)

Kostas Minaidis
Kostas Minaidis

Reputation: 5412

Since the Roadie Theme (at least the original theme) has a unique ID attribute on the body tag, you can target the home page through that ID and apply the following CSS rule to override the default styling and make the homepage span the full window width:

#home_page .outer-wrapper.fixed-width {
    max-width: 100vw;
}

Upvotes: 0

Related Questions