How can I adjust the image height and width on my online store?

Store Design
, ,
1

hi everyone, I add a divider section to my shopify store but when I select an image it looks too big. Can anyone help me make it the right size?

my store: https://you-boho-vibes.myshopify.com/

password: sotroy

ScreenShot_20221220182605.png
ScreenShot_20221220182605.png1365×632 268 KB

section code:

<style>
  .image-spacer__container {
  width: 100%;
  }
  .image-spacer__container img {
  width:100%;
  }
</style>
{% if section.settings.image_spacer != blank %}
  <div class= {{ section.settings.show_on_device }} "image-spacer__container">
    <img src="{{ section.settings.image_spacer | img_url: 'master'}}">
  </div>
{% endif %}

{% schema %}
{
"name": "Image Spacer",
"class": "image-spacer",
"tag": "section",
"settings": [
  {
"type": "select",
"id": "show_on_device",
"options": [
{
"value": "mobile--device",
"label": "Mobile and tablet device"
},
{
"value": "desktop--device",
"label": "Desktop device"
},
{
"value": "show-all-devices",
"label": "Show to all devices"
}
],
"default": "show-all-devices",
"label": "Show this section to this device only",
"info": "Choose which device you want this section to show"
},
{
"type": "header",
"content": "Image"
},
{
"type": "image_picker",
"label": "Pick an Image",
"id": "image_spacer"
}
],
"presets": [
{
"name": "Image Spacer",
"category":"Image",
"settings": {
}
}
]

}
{% endschema %}

{% javascript %}
{% endjavascript %}
2

add this code to your custom.css or design.css

section.shopify-section.image-spacer img {
  max-width: 100%;
}

.shopify-section-template--16640268009700__35b9d020-484a-4980-9485-c578b4f5d828 img {
  max-width: 100%;
}
1 Like
3

hi, thank you.