Debutify with a few questions

[TuffTab]

Hello everyone. my first post here.

just got a couple questions and hope someone might be able to help. thanks in advance.

for reference I am using debutify theme for shopify. latest version of 7.4

1)

I seen this question asked, but the solution didn't make sense to me (in terms I couldn't find the code the other person was referring to). I am trying to move the search button icon from left side, to right side near the cart button. (for mobile)

2)

this is a featured collection section, with 3 products. in the beginning, all items were on one line and scrolling endlessly as a carousel. so I chose grid but that shows them on 2 lines, instead of 1. I am looking to put them into one line but without infinite scrolling. how can I achieve that?

3)

this is an image with text section and weirdly on mobile there's that arrow near to title and I can't figure out how to remove it, so if someone can advise how to.

4) and final 

how can i make this section smaller in size?

[namphan]

Hi @TuffTab,

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

@media screen and (max-width: 767.98px) {
.header-menu .header-menu__item.d-none.d-lg-inline-block {
    display: inline-block !important;
}
.header-menu .header-menu__item.d-inline-block.d-md-none {
    display: none !important;
}
}

[TuffTab]

That didn't really help. Nothing changed

[namphan]

Hi @TuffTab,

Please send the website link, I will check it for you

[TuffTab]

It's https://www.tufftab.com

[namphan]

Hi @TuffTab,

I checked and the code is not added, can you add it again?

[TuffTab]

Ya I readded it. Had removed it since it didn't work earlier

[namphan]

Hi @TuffTab,

I checked and your theme.css file is currently corrupted, so the code was not received.

You can remove this:

or add the following code at the bottom of the theme.liquid file, above </body>:

<style>
@media screen and (max-width: 767.98px) {
.header-menu .header-menu__item.d-none.d-lg-inline-block {
    display: inline-block !important;
}
.header-menu .header-menu__item.d-inline-block.d-md-none {
    display: none !important;
}
}
</style>

[TuffTab]

so i added your code from the first comment and removed that line you highlighted and it worked. thank you. anything on the other points in my post?

[namphan]

Hi @TuffTab,

I checked and other requests don't have class to add specific code.

Can I send you a collaborator invite? I will help you check and add code for it

[TuffTab]

sure. 6365

[namphan]

Hi @TuffTab,

I sent it

[TuffTab]

accepted now

[namphan]

Hi @TuffTab,

2: Please add code here:

3: Please add code here:

4: Please add code CSS:

.footer > .section {
  padding-block-end: 0;
}

[TuffTab]

can you please mention where exactly to add the code? i see you added something. and which css?

[namphan · Accepted solution]

Hi @TuffTab,

Yes, those are CSS changes only in the section.

2: Go to Customize > Sections > Featured collection. Code:

@media screen and (max-width: 767px) {
  .featured-collection-grid {
    --bs-gutter-x: 0.5rem;
  }
  .product-item--grid {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
}

3: Go to Customize > Sections > Image with text. Code:

.rte {
  overflow: visible;
}

4: Go to theme.css file.

You can check it yourself at theme source. 

I hope it is clear to you

[TuffTab]

You have been amazing. Thank you very much

[namphan]

Hi @TuffTab,

You're welcome and happy to help 😊

[TuffTab]

sorry to bother you again, but when i go to my products page, the photos all look stretched and improperly cropped. even on homepage the featured product looks weirdly cropped. can you advise how to fix it please?