How to adjust the mobile view footer newsletter width to 100%?

[admintb]

NEED HELP

Please change the newsletter section to 100% width on mobile view

Shop Link: https://93f811-2.myshopify.com/

[Made4uo-Ribe]

Hi @admintb

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media screen and (max-width: 700px){
.footer__block-list {
    display: grid;
    grid-template-columns: 1fr;
}
}

And ZSave.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[admintb]

@Made4uo-Ribe Can you make the border in black? #000000

[Made4uo-Ribe]

Yes, We can. The code is already over ride what you can do is to find this code in the theme.liquid file.

And change or delete the rgb(var(–border-color))

into black

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[admintb]

@Made4uo-Ribe Can’t find the code

[Made4uo-Ribe]

Its in the theme.liquid inside the

The code you have is already over ride. So it would be hard to over ride it again,.

[admintb]

@Made4uo-Ribe But where can I change my border color in general?

[Made4uo-Ribe]

The general codes are in the theme.liquid.

You need to read the code in the theme.liquid code click ctrl+f then type the code youll like to see.

[admintb]

@Made4uo-Ribe This is my code:

{% if page_title == blank %}{{ shop.name }}{% else %}{{ page_title }}{% if current_page != 1 %} – {{ 'general.page' | t: page: current_page }}{% endif %}{% endif %}

{%- if page_description -%}

{%- endif -%}

{%- if settings.favicon -%}

{%- endif -%}

{%- comment -%}Few prefetch to increase performance on commonly used third-parties{%- endcomment -%}

{%- unless settings.heading_font.system? -%}

{%- endunless -%}

{%- unless settings.text_font.system? -%}

{%- endunless -%}

{%- render ‘social-meta-tags’ -%}
{%- render ‘microdata-schema’ -%}
{%- render ‘css-variables’ -%}
{%- render ‘js-variables’ -%}

{%- if request.page_type == ‘gift_card’ -%}

{%- endif -%}

{{ content_for_header }}

{{- ‘theme.css’ | asset_url | stylesheet_tag: preload: true -}}

{% liquid
assign features_class = ‘’

if settings.show_button_transition
assign features_class = features_class | append: 'features–button-transition ’
endif

if settings.show_image_zoom_on_hover
assign features_class = features_class | append: 'features–zoom-image ’
endif

if settings.show_page_transition
assign features_class = features_class | append: 'features–page-transition ’
endif
%}

{%- render 'shadow-dom-templates' -%}

{{ ‘general.accessibility.skip_to_content’ | t }}

{%- if request.page_type != ‘password’ -%}
{%- sections ‘header-group’ -%}
{%- sections ‘overlay-group’ -%}
{%- endif -%}

{{ content_for_layout }}

{%- comment -%}
IMPLEMENTATION NOTE: For best semantics, having the footer group outside the main would be slightly better, but
moving it inside the main allows to have all the sections (including sections inside the footer group) to be
consecutive, and hence having a cleaner margin collapsing management.
{%- endcomment -%}
{%- if request.page_type != ‘password’ -%}
{%- sections ‘footer-group’ -%}
{%- endif -%}

.drawer::part(header){ border-block-end:none !important } .drawer::part(footer){ padding-block-start:none !important } .line-item-info quantity-selector~a{ background:none !important } .line-item-info .smallcaps{ text-transform:unset !important; } .product-info__block-item:has(.product-title) { text-align: left!important; }