Solved

How can I adjust logo alignment and slide settings in Studio Theme?

MateusSkall
Tourist
3 0 1

Hi,

I have 4 questions:

1) How can I align the location of the logo on desktop and mobile, so that the word SKALL is in the same line as menu items?

2) On the mobile, is this possible to break the heading text on the Slide so that its shows like:

"Elevate Your Table Decor

With Premium Ceramics"

3) How can I have a different size of the font of the Heading Slide text on a mobile and on a desktop?

4) How can I make sure that full picture is displayed on a Slide in both versions Mobile and Desktop? Currently Slide focuses only on a specific area of the picture.

I will appreciate all the hints.

The link to the page: https://feacd2-2b.myshopify.com/

Thanks!

 

Zrzut ekranu 2024-03-16 o 20.19.13.png

Zrzut ekranu 2024-03-16 o 20.28.46.png

Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
7703 1497 1503

This is an accepted solution.

Hi @MateusSkall 

Dan here from Ryviu: Product Reviews & QA app.

1. You can do that by adding this code to your theme.liquid file, after <head>

<style>
.header__heading-logo {
margin-botton: 30px;
}
</style>

2. add this code before </style> of above code in 1.

@media (max-width: 749px) {
.slideshow__text .banner__heading {
    max-width: 255px !imporrtant;
}
}

3. You CSS on 2. to add font size for mobile 

font-size: 24px !important;

 

 

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Dan-From-Ryviu
Shopify Partner
7703 1497 1503

This is an accepted solution.

It is caused by my code to center your logo.

<style>
.header__heading-logo {
margin-botton: 30px;
}
</style>

You can solve it by resize your logo, removing white space at the top and adding some more space at the bottom, removing my above code, upload the logo again Screenshot 2024-03-19 at 09.49.41.png

 

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 4 (4)

Dan-From-Ryviu
Shopify Partner
7703 1497 1503

This is an accepted solution.

Hi @MateusSkall 

Dan here from Ryviu: Product Reviews & QA app.

1. You can do that by adding this code to your theme.liquid file, after <head>

<style>
.header__heading-logo {
margin-botton: 30px;
}
</style>

2. add this code before </style> of above code in 1.

@media (max-width: 749px) {
.slideshow__text .banner__heading {
    max-width: 255px !imporrtant;
}
}

3. You CSS on 2. to add font size for mobile 

font-size: 24px !important;

 

 

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

MateusSkall
Tourist
3 0 1

Hi @Dan-From-Ryviu thanks it worked. Can I have one more question on how to remove this unnaturally high break between the logo and the slides? Zrzut ekranu 2024-03-18 o 19.05.46.png

Dan-From-Ryviu
Shopify Partner
7703 1497 1503

This is an accepted solution.

It is caused by my code to center your logo.

<style>
.header__heading-logo {
margin-botton: 30px;
}
</style>

You can solve it by resize your logo, removing white space at the top and adding some more space at the bottom, removing my above code, upload the logo again Screenshot 2024-03-19 at 09.49.41.png

 

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

MateusSkall
Tourist
3 0 1

Thanks!