Hi there, can i ask you for help ?
i want to change size to original size at desktop view (image in mobile view its showed really well) and take it to the border of page, same with text (just want to expand both to borders image and text)
And change font size of text
Like this:
If is needed, i send by pm my preview url
Thanks so much!
Solved! Go to the solution
PM me, I can try to help
I am running out of private message limit, the final solution is here:
To change the font, please uncomment the line font-family: 'Unica One'; , and change it to whatever font you want, and here is my Youtube channel link, you may find something useful there as well, thanks, https://www.youtube.com/channel/UCxx8s_d6t_RKNqHrp-4bpvQ
@_media only screen and (min-width: 750px) {
#shopify-section-image-content .page-width {
max-width:2000px;
padding-left: 0;
padding-right: 0;
}
#shopify-section-image-content .section-block {
padding-left: 0;
padding-right: 0;
}
#shopify-section-image-content .section-block .flex--center-vertical:last-child {
flex-direction: column;
}
#shopify-section-image-content .image-content__image {
max-width: 720px
}
#shopify-section-image-content .image-content__text{
padding-right: 0;
margin-right: -80px;
}
#shopify-section-image-content .image-content__text .h5 {
font-size: 80px;
/* font-family: 'Unica One'; */
}
#shopify-section-image-content .image-content__text .rte-setting {
font-size: 20px
}
}
@DeepCode thanks for your help! but this code show a desconfigured page!
this is my code right now
only screen and (min-width: 750px) {
#shopify-section-image-content .page-width {
max-width:2000px;
padding-left:0;
}
#shopify-section-image-content .section-block{
padding-left:0;
}
#shopify-section-image-content .section-block .flex--center-vertical:last-child{
flex-direction: column;
}
#shopify-section-image-content .image-content__image {
max-width: 720px
}
#shopify-section-image-content .image-content__text{
padding-right: 0;
margin-right: -80px;
}
#shopify-section-image-content .image-content__text .h5 {
font-size: 80px;
font-family: 'Roboto', sans-serif;
}
#shopify-section-image-content .image-content__text .rte-setting {
font-size: 20px
}
}
i want to show like this:
You can try to reduce the
margin-right: -80px;
to something like -40px;
and put a
<br>
into the title like
NUEVA <br>COLECCIÓN
Everything is working well!! the last thing is how to put that "<br>"
this is my part code of the image-content:
{% endif %}
</div>
{% when 'text_block' %}
<div class="flex__item image-content__text text-{{ block.settings.align }}">
<p class="h5">{{ block.settings.title | escape }}</p>
<div class="rte-setting">{{ block.settings.text }}</div>
</div>
{% endcase %}
</div>
{% endfor %}
</div>
thanks again!
Go here, in the sections tab, you may have what you need to change
@DeepCode wrote:
Go here, in the sections tab, you may have what you need to change
@DeepCode thank for quickly answer, probably i have to edit image-content.liquid? i dont know where i have to put that "<br>" i put here my code from this image-content.liquid
<div class="page-width">
<div class="section-block section-block--padding">
<div class="flex flex--grid flex--no-gutter">
{% case section.blocks.size %}
{% when 1 %}
{% assign flex_size = '' %}
{% when 2 %}
{% assign flex_size = 'medium-up--one-half' %}
{% when 3 %}
{% assign flex_size = 'medium-up--one-third' %}
{% else %}
{% assign flex_size = 'medium-up--one-half' %}
{% endcase %}
{% for block in section.blocks %}
<div class="flex__item flex flex--center-vertical {{ flex_size }}" {{ block.shopify_attributes }}>
{% case block.type %}
{% when 'image_block' %}
<div class="flex__item">
{% if block.settings.image != blank %}
<noscript>
<img src="{{ block.settings.image | img_url: '600x' }}" alt="{{ block.settings.image.alt }}" class="image-content__image">
</noscript>
<div class="image-content__image-container">
<div class="image-content__image-wrapper" style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100}}%;">
{% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="image-content__image lazyload"
src="{{ block.settings.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ block.settings.image.alt | escape }}">
</div>
</div>
{% else %}
<div class="image-content__image">
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% endif %}
</div>
{% when 'text_block' %}
<div class="flex__item image-content__text text-{{ block.settings.align }}">
<p class="h5">{{ block.settings.title | escape }}</p>
<div class="rte-setting">{{ block.settings.text }}</div>
</div>
{% endcase %}
</div>
{% endfor %}
</div>
{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
</div>
</div>
thank you!
did it work, if it did, that is a good place
User | Count |
---|---|
443 | |
192 | |
139 | |
60 | |
42 |