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!
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
Hi @KetanKumar worked great so far! Thanks!
Seem to be having two problems though.
The space from the photo to the header on mobile is too big now. Is there a way to shorten the space?
Is there a code to add a “Shop Now” button to both the desktop and mobile images?
Thank you for the help!
yes please share issue image
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!
yes please try this code
@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?
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 Oh sure! I would like the button to look something like this for both desktop and mobile. Thanks!
oh yes please add code button html on new section
@KetanKumar can you explain how to do this? Thanks!
can you please share new both section code
Hi @KetanKumar I’m not really sure what code. I don’t really know much about coding. I’m sorry! I just followed the code you linked to add both a mobile banner and desktop. Is there a way to just add a button to this code?
Thanks!
yes please new section code mobile and desktop
@KetanKumar Sure!
The desktop code is:
The Mobile code is:
}
]
}
],
“presets”: [
{
“name”: “YX Mobile Banner”,
“category”: “Home”,
“blocks”:[{“type” : “image_picker”}]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
And this to allow it only to show on mobile or desktop
@media only screen and (max-width: 749px) {
.yx-mobile-hidden{
display:none;
}
.yx-desktop-hidden{
display:block;
}
}
@media only screen and (min-width: 750px) {
.yx-mobile-hidden{
display:block;
}
.yx-desktop-hidden{
display:none;
}
}
Thanks!
can you try this code desktop and let me know so i will give you css
{% for block in section.blocks limit: 1 %}
{{ section.settings.linktext }}
{% endfor %}
{% 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 %}
@KetanKumar it gave the option to have a button when I customize but the actual button doesn’t show when I try it.
Thanks
oh sorry i have missing one code can you please update this code
{% for block in section.blocks limit: 1 %}
{{ block.settings.linktext }}
{% endfor %}
{% 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 %}
@KetanKumar It worked!! Thank you so much! Is it the same for desktop?
yes please