How can I reduce the size of my desktop image in Dawn theme?

[Danielpochapski]

Hey guys, I’m using a Tooltips Section on my store’s home page. However, the desktop image is excessively large. Does anyone know how I can reduce the size? (say at least 50%). Thanks.

My website is: https://www.smartcasashop.com.br/

The image:

The code is:

Show More

{%- comment -%} ---------------- THE CSS --------------------- {%- endcomment -%}

{%- assign button_width_small = 28 -%}
{%- assign button_width_large = 32 -%}
{%- assign tooltip_max_width = 320 -%}
{%- assign image_aspect_ratio = section.settings.image.aspect_ratio | default: 1 -%}
{%- assign section_selector = ‘[data-tooltips="’ | append: section.id | append: ‘"]’-%}

{%- comment -%} ---------------- THE NO-JS ------------------- {%- endcomment -%}

{%- comment -%} ---------------- THE MARKUP ------------------ {%- endcomment -%}

{%- for block in section.blocks -%}
1.
{%- endfor -%}

{%- comment -%} ---------------- THE CONFIG ------------------ {%- endcomment -%}

{%- comment -%} ------------------ THE JS -------------------- {%- endcomment -%}

{%- comment -%} --------------- THEME EDITOR ----------------- {%- endcomment -%}

{%- if section.blocks.last.shopify_attributes != blank -%}

{%- endif -%}

{%- comment -%} ---------------- THE SETTINGS ---------------- {%- endcomment -%}

{% schema %}
{
“name”: “Tooltips”,
“class”: “sd-tooltips”,
“settings”: [
{
“type”: “paragraph”,
“content”: “Tooltips by Sections.design”
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Main image”
},
{
“type”: “color”,
“id”: “tooltip_color”,
“label”: “Tooltip text color”,
“default”: “#ffffff”
},
{
“type”: “color”,
“id”: “tooltip_background_color”,
“label”: “Tooltip background color”,
“default”: “#64cbdf”
},
{
“type”: “color”,
“id”: “tooltip_focus_color”,
“label”: “Tooltip focus color”,
“default”: “#ff0000”
},
{
“type”: “text”,
“id”: “breakpoint”,
“label”: “Media query breakpoint”,
“default”: “768”
}
],
“blocks”: [
{
“type”: “Tooltip”,
“name”: “Tooltip”,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: “Tooltip”,
“default”: “Tooltip title”
},
{
“type”: “html”,
“id”: “content”,
“label”: “Tooltip HTML content”,
“default”: “I am a tooltip, I provide additional explanatory content and showcase product features.”
},
{
“type”: “range”,
“id”: “top”,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “%”,
“label”: “Top position”,
“default”: 50
},
{
“type”: “range”,
“id”: “left”,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “%”,
“label”: “Left position”,
“default”: 50
}
]
}
],
“presets”: [
{
“name”: “Tooltips”,
“category”: “Tooltips by Sections.design”,
“blocks”: [
{
“type”: “Tooltip”
}
]
}
]
}
{% endschema %}

[Danielpochapski]

Yes, please!!

[PageFly-Victor]

Hi @Danielpochapski ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :

Hope my answer will help you.

Best regards,

Victor | PageFly

[made4Uo]

Hi @Danielpochapski ,

You can minimize the image by following the instructions below.

1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
2. Find the Asset folder, and open the base.css file
3. Add the code below at the very end of the file

figure.tooltips-figure {
    display: flex;
    justify-content: center;
    align-items: center;
}

See result below: