How can I enlarge and centralize images on my Debut theme website?

Store Design
1

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
Maria901_0-1632417884906.png937×438 403 KB

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

Maria901_1-1632417998687.png
Maria901_1-1632417998687.png852×360 41.8 KB

Any help is very much appreciated!

Thanks in advance :slightly_smiling_face:

Giulio

2

Hi @Maria901

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

Cheers!

3

Hi,

Sure, https://le-gommose.myshopify.com/admin/themes/126690590883/editor

Thanks!

Giulio

4

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

Ans 1:

@media only screen and (min-width: 750px)

.hero–small {
height: 100vh;

}
Ans 2:

.grid__item.medium-up–one-third.text-left {
text-align: center !important;

}

5

@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

6

Hi Denishamakwana,

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

Best,

Giulio

7

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
Maria901_0-1632478130424.png1255×416 246 KB

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

Best,

Giulio

8

@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