Fix footer in dawn theme

[shilpa_etsy]

URL: angelfranc.store
pass: 1234
Theme: Dawn

The Goal:

What I’ve done so far:

The Code:

@media (min-width: 768px) {

/* Newsletter block inline */

.footer-block–newsletter {

display: flex !important;

align-items: center !important;

gap: 12px;

margin-top: 0 !important;

justify-self: start;

}

/* Force heading inline */

.footer-block–newsletter .footer-block__heading {

margin: 0 !important;

font-weight: 600;

text-transform: uppercase;

font-size: 14px;

white-space: nowrap;

}

/* Put heading + form in one line */

.footer-block–newsletter .footer__newsletter {

display: flex !important;

align-items: center !important;

gap: 8px;

margin: 0;

}

/* Input box */

.footer-block–newsletter input[type=“email”] {

background: #e8dfd8;

border: 1px solid #ccc;

padding: 6px 10px;

font-size: 14px;

min-width: 180px;

}

/* Submit button */

.footer-block–newsletter button {

background: transparent;

border: none;

cursor: pointer;

font-size: 16px;

padding: 0 6px;

}

}

[devcoders]

Hi @shilpa_etsy

1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
2. In the Assets folder, open base.css and add your CSS code at the end

.footer__content-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid #ccc; 
  border-bottom: 1px solid #ccc;
  padding: 8px 0;
}

.footer__content-top .footer-block:first-child {
  display: flex;
  align-items: center;
  gap: 20px; 
}

.footer__list-social {
  display: flex;
  gap: 10px;
}

.footer__newsletter {
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer__newsletter input[type="email"] {
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid #ccc;
}

.footer__newsletter button {
  font-size: 13px;
  padding: 5px 12px;
  background: #000;
  color: #fff;
  border: none;
  cursor: pointer;
}

.footer__content-top .footer-block:last-child {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer__content-top .footer-block:last-child a {
  position: relative;
  color: #000;
  font-size: 13px;
  text-decoration: none;
}

.footer__content-top .footer-block:last-child a::after {
  content: "|";
  margin-left: 8px;
  color: #777;
}

.footer__content-top .footer-block:last-child a:last-child::after {
  content: "";
}

[shilpa_etsy]

TYSM!!

but can we have social icons first - then newsletter horizontally like my goal image and then the links ??

[devcoders]

@shilpa_etsy

but can we have social icons first - then newsletter horizontally like my goal image and then the links ??

Please try this code.

.footer__content-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 8px 20px;
  gap: 20px;
}

/* Newsletter left */
.footer-block--newsletter {
  order: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Links right */
.footer__blocks-wrapper {
  order: 2;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer__blocks-wrapper a {
  position: relative;
  color: #000;
  font-size: 13px;
  text-decoration: none;
}

.footer__blocks-wrapper a::after {
  content: "|";
  margin-left: 8px;
  color: #777;
}

.footer__blocks-wrapper a:last-child::after {
  content: "";
}

[Manoj_j]

Hi @shilpa_etsy ,
I hope this message finds you well.
Go to Assets/base.css
and add this code at the bottom

.footer__content-top {
  display: flex;
  align-items: center;   /* vertically center content */
  justify-content: center; /* spread across row */
  flex-wrap: wrap;       /* allows wrap on mobile */
  gap: 20px;             /* spacing between blocks */
}

.footer-block--newsletter {
  order: 2;  
}

.footer__list-social {
  order: 1; 
}

.footer__blocks-wrapper {
  order: 3;  
}

Save and refresh preview.
Here is the result

If I was able to solve your issue, please don’t forget to like and mark it as solution,
as it may help others who have the same issue. If you need any further assistance, feel free to reach out to me.
For quick response visit Profile - Manoj_j - Shopify Community
Thanks & Regards
Manoj

[namphan]

Hi @shilpa_etsy,

Please go to Customize > Theme settings > Custom CSS and add code:

@media screen and (min-width: 750px) {
    .footer-block--newsletter {
        margin-left: auto;
        margin-right: auto;
        padding-top: 3rem;
    }
}

[shilpa_etsy]

this code didn’t work

[tim_1]

This

.footer__content-top.page-width {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer__list-social {
  order: 1;
}

.footer-block__newsletter {
  order: 2;
}

.footer__blocks-wrapper {
  order: 3;
}

.footer-block--newsletter {
  align-items: center;
  margin-top: 0;
}

.footer-block__newsletter {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-block__heading {
  margin-bottom: 0;
}

Will produce this: