How can I resize my Studio Theme banner for mobile and desktop views?

LSCollective · ‎01-31-2024

Hello - thanks for your help in advance.

Currently using the Studio Theme: lazysusancollective.com, msg me for PW - I'm trying to make the homepage to just be a photo with a button that enters to the website and coming across a couple of issues:

In desktop, there's a cursor and the banner image although takes up the full screen, shows a white bar on top. It'd like for it to just be fixed without having to scroll and be able to adapt to multiple screen sizes.

In mobile, it's only showing half of banner. Is it possible to have the banner zoom in so that it takes up the full page? Or is there a way to have a different photo for mobile so that I can use a vertical photo.

Dan-From-Ryviu · ‎02-01-2024

Add this code to your theme.liquid file, after <head> in Online Store > Themes > Edit code

{% if template == 'index' %}
<style>
@media (max-width: 749px) {
.banner__content {
    min-height: 100vh;
}
.section-header {
margin-top: 0px !important;
}
}
</style>
{% endif %}

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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

LSCollective · ‎02-01-2024

.banner--large:not(.banner--mobile-bottom):not(.banner--adapt)
.banner__content {
min-height: 85rem;
}

View solution in original post

Dan-From-Ryviu · ‎01-31-2024

I cannot message you because your account is a visitor. You can message me your password protected so I can check and help you

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

LSCollective · ‎02-01-2024

PW: 1234

Dan-From-Ryviu · ‎02-01-2024

Add this code to your theme.liquid file, after <head> in Online Store > Themes > Edit code

{% if template == 'index' %}
<style>
@media (max-width: 749px) {
.banner__content {
    min-height: 100vh;
}
.section-header {
margin-top: 0px !important;
}
}
</style>
{% endif %}

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

LSCollective · ‎02-01-2024

it got rid of the bar in the desktop but the mobile is still not taking up the full screen.

LSCollective · ‎02-01-2024

.banner--large:not(.banner--mobile-bottom):not(.banner--adapt)
.banner__content {
min-height: 85rem;
}

HELDERWRLD · ‎09-14-2024

Hello @Dan-From-Ryviu

Do you know how i can fix the banner on my password page mobile and also desktop? i want it to reach the bottom not to go over the bottom also, just like my main page.

website: https://www.diversusoficial.com/
password if needed: diversusoficial

Dan-From-Ryviu · ‎09-15-2024

Hi @HELDERWRLD

Please add this code to Custom CSS of banner sections

Desktop

.banner--adapt { height: calc(100vh - 70px); }

Mobile

.banner--adapt { height: calc(100vh - 71px); }

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

HELDERWRLD · ‎09-16-2024

Thank you so much @Dan-From-Ryviu

It worked perfectly. Actually only needed to use of the codes you sent. Also tried on other pages i needed to fix the banner and also worked perfectly.

I have only one more question, maybe you can help me.

Do you know how i can put these two products like in the middle on desktop only? This is a Featured Collection block.
I'm dropping only two products and it messes de asthetics if i put it too big, so i would like to know if you know how to put it on the middle while mantaining the same size please.

Or if you know how i can put the two columns and reduce the size of the columns to whatever i see it better?

Thank you in advance!

Dan-From-Ryviu · ‎09-16-2024

Please add this code to Custom CSS of that section in Online Store > Themes > Customize

.grid { justify-content: center; }

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

HELDERWRLD · ‎09-16-2024

WOW, You're the Goat!!

It worked Perfectly!

Sorry for pushing. Do you know how can i also leave some space in between the two products?

How can I resize my Studio Theme banner for mobile and desktop views?

How can I resize my Studio Theme banner for mobile and desktop views?

Community Blog Articles