How to edit to original size "image with text" section (VENTURE THEME)

Solved
JLbyone
Excursionist
175 17 38

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

expandimagetextsection.jpg

 

Like this:

ejemploexpander.jpg

 

 

 

If is needed, i send by pm my preview url

 

Thanks so much!

0 Likes

PM me, I can try to help

Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
JLbyone
Excursionist
175 17 38

@DeepCode wrote:

PM me, I can try to help


Done! hope you can help me!

Thanks again!

0 Likes

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
    }
}

 

 

 

Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
JLbyone
Excursionist
175 17 38

@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: 

 

sectionedit3.jpg

 

0 Likes

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

 

Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
JLbyone
Excursionist
175 17 38

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!

0 Likes

Untitled design (1).jpg

 

Go here, in the sections tab, you may have what you need to change

Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
JLbyone
Excursionist
175 17 38

@DeepCode wrote:

Untitled design (1).jpg

 

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 

Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
0 Likes