Change mobile hero to vertical on Brooklyn theme

Solved
lilyyp
Excursionist
30 0 17

Hi! I am looking to change only the mobile hero photo to be vertical on my website. Right now it is horizontal on both the mobile and desktop sites. I want to leave the desktop version alone and just change the mobile. Is there a way to add another version of my image to allow it to show properly vertical on mobile? 

My url is liveinbungalow.com

Thanks!

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
25061 2508 9071

This is an accepted solution.

@lilyyp 

oh sorry i have missing one code can you please update this code

 

<style>
.image-cover a.button.btn
 { position: absolute; left: 0; right: 0; max-width: 130px ; margin: 0px auto; margin-top: 50vh ; }
</style>
<div class="page-width yx-desktop-banner-container yx-mobile-hidden">
<div class="container-full">
{% for block in section.blocks limit: 1 %}
<div class="image-cover">
<img class="img-responsive lazyload" data-src="{{ block.settings.yx_image_picker | img_url: '2000x' }}" />
<a href="{{ block.settings.link }}" class="button btn">{{ block.settings.linktext }}</a>
</div>
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "YX Desktop Banner",
"class": "yx-desktop-banner-section",
"max_blocks": 1,
"blocks": [
{
"type": "image_picker",
"name": "Desktop Banner Image",
"settings": [
{
"label": "Desktop Banner Image",
"id": "yx_image_picker",
"type": "image_picker"
},
{
      "id": "link",
      "type": "url",
      "label": "Button link"
    },
    {
      "id": "linktext",
      "type": "text",
      "label": "Button text",
      "default": "Click Here"
    }
]
}
],
"presets": [
{
"name": "YX Desktop Banner",
"category": "Home",
"blocks":[{"type" : "image_picker"}]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 33 (33)
KetanKumar
Shopify Partner
25061 2508 9071

@lilyyp 

sorry for any issue can you please let me know which banner do you need this 

if you need different banner desktop and mobile try this 

https://www.mojoin.com/show-shopify-banner-image/

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lilyyp
Excursionist
30 0 17

Hi @KetanKumar worked great so far! Thanks!

Seem to be having two problems though. 

1. The space from the photo to the header on mobile is too big now. Is there a way to shorten the space? 

2. Is there a code to add a "Shop Now" button to both the desktop and mobile images? 

Thank you for the help! 

KetanKumar
Shopify Partner
25061 2508 9071

@lilyyp 

yes please share issue image

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lilyyp
Excursionist
30 0 17

162CAB9D-0EAD-48E2-99D6-6CC263B3F28C.jpeg

Hi @KetanKumar attached is the photo. The arrow shows the space I would like to shorten and the circle shows the location I would like the “shop now” button to be. Same button location for desktop as well. 

thanks! 

KetanKumar
Shopify Partner
25061 2508 9071

@lilyyp 

yes please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 768px) {
.index-sections .shopify-section {
    margin-top: 0;
}
}

sorry but i can't see shop now button can you please add?

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lilyyp
Excursionist
30 0 17

Hi @KetanKumar thanks for the code! Worked great for the spacing. 

There currently is no "Shop Now" button. I would like to add the button in the middle of the photo header on both mobile and desktop but am unsure how to do that. I have circled where I would like the button to be. 

 

Thanks! 

KetanKumar
Shopify Partner
25061 2508 9071

@lilyyp 

yes please show me shop now button 

so i will give you proper code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lilyyp
Excursionist
30 0 17

Screen Shot 2021-11-01 at 1.59.24 PM.png

@KetanKumar Oh sure! I would like the button to look something like this for both desktop and mobile. Thanks! 

KetanKumar
Shopify Partner
25061 2508 9071

@lilyyp 

oh yes please add code button html on new section 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing