Sense Theme: make mobile footer into two columns

Solved

Sense Theme: make mobile footer into two columns

Melinda5
Explorer
52 3 11

Hello, 

 

Currently using Sense theme and the mobile footer only displays the footer menus in one vertical column. I would like it to be two columns (side by side). Does anyone know a CSS code I can add to this section?

Here is how it currently looks:

Screenshot 2023-03-06 at 6.43.54 PM.png

 

I would like to save space/scroll time and have it to look something like thisSB6lXBCNKUUWgnxbq-27wg.jpeg:

 

 

Another option would be making the menus be drop down like this (not sure if this would be easier or harder):

IMG_5439.PNG 

 

 

Website is issamiracle.com.

Thank you so much in advance!

 

 

 

I am tagging a few page contributors that solved similar discussions, however those codes did not work for me.Hoping you guys can help! 

 

@PageFly-Victor @PageFly-Kate @PageFly-Richard @ParthBhut @Michael144 @GemPages @LitExtension 

 

Accepted Solutions (2)

GemPages
Shopify Partner
5625 1261 1231

This is an accepted solution.

Hi @Melinda5 
I would like to give you a solution to support you.

 

You can try adding the below code:

1. Go to Online Store -> Theme -> Edit code https://prnt.sc/XkUYXZPnym_E

2. Open your base.css in the Assets folder.
3. Paste the below code at the end of the file

@media screen and (max-width: 749px){
  .footer .grid {
    display: flex !important;
  }
  .footer-block.grid__item{
    width: 45% !important;
    margin: 0 !important;
  }
  .footer-block.grid__item:first-child, .footer-block.grid__item:last-child {
    width: 100% !important;
  }
}

 

Result: 

GemPages_0-1678152480954.png

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Litos
Globetrotter
688 169 147

This is an accepted solution.

Hi @Melinda5,

Please go to footer.liquid file and change all code here:

Screenshot.png

Code:

{%- if block.settings.heading != blank -%}
                <h2 class="footer-block__heading {% if block.settings.menu != blank and block.type == 'link_list' %}small-hide{% endif %}">{{- block.settings.heading | escape -}}</h2>
              {%- endif -%}

              {%- case block.type -%}
                {%- when 'text' -%}
                  <div class="footer-block__details-content rte">
                    {{ block.settings.subtext }}
                  </div>
                {%- when 'link_list' -%}
                  {%- if block.settings.menu != blank and block.settings.heading != blank -%}
                    <ul class="footer-block__details-content list-unstyled small-hide">
                      {%- for link in block.settings.menu.links -%}
                        <li>
                          <a href="{{ link.url }}" class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}">
                            {{ link.title }}
                          </a>
                        </li>
                      {%- endfor -%}
                    </ul>
                    <div class="accordion medium-hide large-up-hide">
                      <details id="Details-{{ block.id }}-{{ section.id }}">
                        <summary id="Summary-{{ block.id }}-{{ section.id }}">
                          <h3 class="accordion__title h4">
                            {{ block.settings.heading }}
                          </h3>
                          {% render 'icon-caret' %}
                        </summary>
                        <div class="accordion__content rte" id="CollapsibleAccordion-{{ block.id }}-{{ section.id }}" role="region" aria-labelledby="Summary-{{ block.id }}-{{ section.id }}">
                          <ul class="footer-block__details-content list-unstyled">
                            {%- for link in block.settings.menu.links -%}
                              <li>
                                <a href="{{ link.url }}" class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}">
                                  {{ link.title }}
                                </a>
                              </li>
                            {%- endfor -%}
                          </ul>
                        </div>
                      </details>
                    </div>
                  {%- endif -%}

Hope it helps!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.

View solution in original post

Replies 9 (9)

GemPages
Shopify Partner
5625 1261 1231

This is an accepted solution.

Hi @Melinda5 
I would like to give you a solution to support you.

 

You can try adding the below code:

1. Go to Online Store -> Theme -> Edit code https://prnt.sc/XkUYXZPnym_E

2. Open your base.css in the Assets folder.
3. Paste the below code at the end of the file

@media screen and (max-width: 749px){
  .footer .grid {
    display: flex !important;
  }
  .footer-block.grid__item{
    width: 45% !important;
    margin: 0 !important;
  }
  .footer-block.grid__item:first-child, .footer-block.grid__item:last-child {
    width: 100% !important;
  }
}

 

Result: 

GemPages_0-1678152480954.png

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Melinda5
Explorer
52 3 11

Thank you so much for that!

Melinda5
Explorer
52 3 11

Thank you so much!!!! I really appreciate it. Do you know if it is possible to center the columns also or is there not enough space for that?

Thank you!

Litos
Globetrotter
688 169 147

Hi @Melinda5,

If you want to add drop down for mobile you can follow my previous tutorial it will work fine.

Hope it helps!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
Melinda5
Explorer
52 3 11

I tried it, but it didn't do anything 😥

Melinda5
Explorer
52 3 11

Hello again, would the same code apply to the dawn theme, to get the dropdown footer menu. If so, where would I paste the code?

Thank you again!!

Litos
Globetrotter
688 169 147

This is an accepted solution.

Hi @Melinda5,

Please go to footer.liquid file and change all code here:

Screenshot.png

Code:

{%- if block.settings.heading != blank -%}
                <h2 class="footer-block__heading {% if block.settings.menu != blank and block.type == 'link_list' %}small-hide{% endif %}">{{- block.settings.heading | escape -}}</h2>
              {%- endif -%}

              {%- case block.type -%}
                {%- when 'text' -%}
                  <div class="footer-block__details-content rte">
                    {{ block.settings.subtext }}
                  </div>
                {%- when 'link_list' -%}
                  {%- if block.settings.menu != blank and block.settings.heading != blank -%}
                    <ul class="footer-block__details-content list-unstyled small-hide">
                      {%- for link in block.settings.menu.links -%}
                        <li>
                          <a href="{{ link.url }}" class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}">
                            {{ link.title }}
                          </a>
                        </li>
                      {%- endfor -%}
                    </ul>
                    <div class="accordion medium-hide large-up-hide">
                      <details id="Details-{{ block.id }}-{{ section.id }}">
                        <summary id="Summary-{{ block.id }}-{{ section.id }}">
                          <h3 class="accordion__title h4">
                            {{ block.settings.heading }}
                          </h3>
                          {% render 'icon-caret' %}
                        </summary>
                        <div class="accordion__content rte" id="CollapsibleAccordion-{{ block.id }}-{{ section.id }}" role="region" aria-labelledby="Summary-{{ block.id }}-{{ section.id }}">
                          <ul class="footer-block__details-content list-unstyled">
                            {%- for link in block.settings.menu.links -%}
                              <li>
                                <a href="{{ link.url }}" class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}">
                                  {{ link.title }}
                                </a>
                              </li>
                            {%- endfor -%}
                          </ul>
                        </div>
                      </details>
                    </div>
                  {%- endif -%}

Hope it helps!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
Divin3
Tourist
9 0 1

All it did was make my footer disappear. I thought this was to make footer columns??

Litos
Globetrotter
688 169 147

Hi @Melinda5,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
.footer-block.footer-block--menu {
text-align: center !important;
}
.footer-block.footer-block--menu .list-menu__item--link {
justify-content: center !important;
}
}

Hope it helps!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.