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

Solved

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

MateusSkall
Tourist
4 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
10935 2148 2285

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;

 

 

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu
Shopify Partner
10935 2148 2285

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

 

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 4 (4)

Dan-From-Ryviu
Shopify Partner
10935 2148 2285

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;

 

 

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

MateusSkall
Tourist
4 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
10935 2148 2285

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

 

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

MateusSkall
Tourist
4 0 1

Thanks!