Can I enhance image size and text alignment on my Shopify Debut theme?

Maria901
Excursionist
22 0 2

Hi all,

 

I am working on a website with Debut theme and I would like to improve a little bit the look and feel of the website.

 - It would be great to know how I can make the image below bigger so that it covers the whole page from the top.

Maria901_0-1632417884906.png

 - Also, how can I make sure the text is centralized under each image in the picture below:

Maria901_1-1632417998687.png

 

Any help is very much appreciated!

 

Thanks in advance 🙂

 

Giulio

 

Replies 7 (7)

JHKCreate
Shopify Expert
3571 639 916

Hi @Maria901 

Would you mind sharing your store's URL so we can have a look at that and provide the relevant solutions?

Cheers!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Maria901
Excursionist
22 0 2

Denishamakwana
Shopify Partner
1408 173 231

Please add below code in bottom of asets/theme.css file

Ans 1:

@media only screen and (min-width: 750px)
.hero--small {
          height: 100vh;
If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
Maria901
Excursionist
22 0 2

Hi ,

I added the codes as per your message below, but both solutions are not working. 

Best,

Giulio

diego_ezfy
Shopify Partner
2935 562 883

@Maria901, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

.grid .grid__item h3[class]{
    text-align: center !important

}

.grid .grid__item h3[class] + [class*='rte']{
    text-align: center !important;
}

.hero{
    height: 100vh !important;
}



Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Maria901
Excursionist
22 0 2

Hi Diego,

Thanks for your message. The text centralization worked.

 

Regarding my first question abut the image, what I would like to do is to have the image starting from the top of the screen (please see the screenshot below as an example):

Maria901_0-1632478130424.png

Do you know if it is possible to do the same on my home page?

Best,

Giulio

 

diego_ezfy
Shopify Partner
2935 562 883

@Maria901 

Although doable, that would be more of a complex task.

The header would need to have a fixed position to be on top of the banner and many other aspects of the navigation would have to be considered and tested too - adding some code may make it look ok on the homepage but then it's off on different pages. Hopefully someone around will be kind enough to get that coded in for you, though the fastest/safest route would be either acquiring a theme that comes with that behavior out of the box or hiring a dev to help you out.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.