How can I remove a border line under my text columns on mobile?

Store Design
1

Hi there,

I’m wondering if its possible to remove this line under my heading of the Text columns with images Block. It only appears on mobile.

Store is Pawcopets.co.uk

Thanks!

Screenshot 2021-09-29 at 19.32.17.png
Screenshot 2021-09-29 at 19.32.17.png612×672 162 KB

2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
@media only screen and (max-width: 769px){
.section-header::after, .shopify-policy__title::after {
border-bottom: none!important;
}
}
1 Like
3

hello @thomasmrgn99

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 769px){
.template-index   .section-default .section-header::after, .template-index  .section-default .shopify-policy__title::after {
    border-bottom: transparent;
}
}
1 Like
4

@ZestardTech @Kinjaldavra Thanks I really appreciate your help.

By any chance do you know if it is possible to reduce the size of the images in the Text columns with image block?

Screenshot 2021-10-02 at 17.10.01.png
Screenshot 2021-10-02 at 17.10.01.png582×1026 317 KB

5

hello @thomasmrgn99

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 769px){
.section-default .box .wrapper .grid .grid__item .media-wrapper.spacer-bottom{
    background-color: #f7f8fa;
}
.section-default .box .wrapper .grid .grid__item .media-wrapper.spacer-bottom img{
    width: 373px;
    margin: 0 auto;
}
 }
1 Like
6

@Kinjaldavra Thank you sir.. do you know if it’s possible to adjust the padding as they are out of place ?

Screenshot 2021-10-03 at 13.02.41.png
Screenshot 2021-10-03 at 13.02.41.png558×976 207 KB

7

hello @thomasmrgn99

can you please highlight of screenshot where to adjust the padding

8

Hi @Kinjaldavra

After reducing the size of the images in ‘text columns with image’ (Mobile view) thanks to your code

There is large blank space under the images now

I was wondering if it is possible to reduce this space

I hope I explained it well, thanks for the help

image.png
image.png229×400 59 KB

9

hello @thomasmrgn99

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (min-width: 600px) and  (max-width: 776px) {
 .template-index  .section-default .media-wrapper.spacer-bottom {
     padding-top: 45% !important;
 }
}

@media screen and (min-width: 518px) and  (max-width: 600px) {
 .template-index  .section-default .media-wrapper.spacer-bottom {
    padding-top: 50% !important;
 }
}
@media screen and (min-width: 406px) and  (max-width: 519px) {
 .template-index  .section-default .media-wrapper.spacer-bottom {
   padding-top: 65% !important;
 }
}
2 Likes
10

@Kinjaldavra Amazing thank you so much!

11

Is there an updated code and section for this? I do not see the “2. Find Asset >theme.css” under the edit code.