Text Columns with Images align 4 columns in 1 row

[LoveLend]

Hi there,

I’m wanting to reduce the sizing of the text columns with images on my home page and fit them on the width of the page. Could you please advise?

URL is https://lend-and-love.myshopify.com/

Thank you

[PaulNewton]

Which theme are you using and what is the section being used.

Storefront is also password protected goodluck.

[Kinjaldavra]

hello @LoveLend

your store is password protected please share your password

[suyash1]

@LoveLend - please share password to view the page

[LoveLend]

drauff is the password

[suyash1]

@LoveLend - please check if in your customizer do you have an option to change 2 products to 4 in a row, if no then use this css which should make it like screenshot below, this is for desktop only and not mobile or ipad, add this to the very end of theme.css file

@media screen and (min-width:1200px){
#shopify-section-16307081819514b8dc .grid .grid__item{
width: 25%; clear:none;}
}

[Denishamakwana]

please add below code bottom of the theme.css file

@media only screen and (min-width: 750px)

.medium-up–one-half {
width: 25%;
clear: none !important;

}

[LoveLend]

Thank you @suyash1 that code worked perfectly!

[winsilvia]

Hello Suyash

I have a similar problem on my site https://vecchiamalganegozi.myshopify.com/, I would like to add a 4th element to the icons in the middle and I only have 2 options: centered or inline , and none of them is showing the 4 icons in a row. So I decided to leave 3 icons only but I really would like to have them 4. Can you please help me? thank you in advance

Silvia

[winsilvia]

[Kinjaldavra]

hello @winsilvia

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (min-width: 768px){
.js-section__home-inline  .home-inline__items .u-1\/3\@tab {
    width: 25%;
}
}

[winsilvia]

Hello Natztech

thank you so much!!! it worked!!!

sorry if I didn’t answer before!!

thank you again and have a nice day

Silvia

[Nakata_Satoru]

I am facing a similar issue however on the Highlight theme. It is named differently: Images-with-text-overlay.liquid.

I tried to use the solution to the other issue however did manage to crack the code…

The code:

{%- if section.settings.title != blank -%}

{{ section.settings.title | escape }}

{%- endif -%}

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

{%- liquid

if section.settings.layout == ‘regular’

assign css_class = ‘’

if section.blocks.size == 1 or forloop.index == 1 and section.blocks.size == 3
assign css_class = ‘text-large ten-tenths lap–full-width push-left-one-tenth lap–push-left-none’
elsif section.blocks.size == 3
assign css_class = ‘text-medium four-plus-tenths lap–five-plus-tenths push-top-one-tenth push-left-one-tenth’
if forloop.index == 2
assign css_class = css_class | append: ’ lap–push-left-none’
endif
elsif section.blocks.size == 4 or section.blocks.size == 2
assign css_class = ‘text-medium four-plus-tenths lap–five-plus-tenths push-top-one-tenth push-left-one-tenth’
if forloop.index == 1 or forloop.index == 3
assign css_class = css_class | append: ’ lap–push-left-none’
endif
endif

if section.blocks.size == 4 and forloop.index > 2
assign css_class = css_class | append: ’ push-top-one-tenth’
endif

else

if forloop.index == 1

if section.blocks.size == 1
assign css_class = ‘text-large eight-tenths lap–ten-tenths push-left-one-tenth lap–push-left-none’
elsif section.blocks.size == 2
assign css_class = ‘text-large five-tenths lap–seven-tenths push-left-one-tenth lap–push-left-none’
elsif section.blocks.size > 2
assign css_class = ‘text-large six-tenths lap–seven-tenths push-left-one-tenth lap–push-left-none’
endif

elsif forloop.index == 2 or forloop.index == 4

if section.blocks.size == 2
assign css_class = ‘text-medium four-tenths’
else
assign css_class = ‘text-small three-tenths push-top-two-tenths’
endif
if forloop.index == 4
assign css_class = css_class | append: ’ lap–five-tenths’
else
assign css_class = css_class | append: ’ lap–four-tenths lap–push-top-three-tenths’
endif
assign css_class = css_class | append: ’ push-left-one-tenth’

elsif forloop.index == 3

assign css_class = ‘text-medium four-tenths lap–five-tenths palm–full-width’
if section.blocks.size == 4
assign css_class = css_class | append: ’ push-left-two-tenths lap–push-left-none push-top-two-tenths lap–push-top-none’
else
assign css_class = css_class | append: ’ push-left-three-tenths lap–push-left-two-tenths push-top-one-tenth’
endif

endif

endif

-%}

{%- if block.settings.button_label == blank and block.settings.button_link != blank -%}

{%- else -%}

{%- endif -%}

{%- unless block.settings.image == blank -%} {%- render 'lazy-image', image: block.settings.image, alt: block.settings.heading, type: 'background', alignment: block.settings.alignment -%} {%- else -%} {{ 'image' | placeholder_svg_tag }} {%- endunless -%}

{%- if block.settings.heading != blank -%}
{{ block.settings.heading | escape }}
{%- endif -%}

{%- if block.settings.description != blank -%}

{{ block.settings.description }}

{%- endif -%}

{%- if block.settings.button_label != blank -%}

{{ block.settings.button_label | escape }}
{% render ‘theme-symbols’, icon: ‘arrow-right’ %}

{%- endif -%}

{%- if block.settings.button_label == blank and block.settings.button_link != blank -%}

{%- else -%}

{%- endif -%}

{%- endfor -%}

[mcordia]

Can you help me update the code to change the Text Columns With Images To Align 4 Columns In 1 Row on the Expanse Theme?

[suyash1]

@mcordia - can you please share your website link?

[Archit_1]

Hi Suyash,

I am facing the same issue as well on my Website. The column with text images shows as two columns although would like them in a row