Custom Icons with Text and Header On homepage

Solved
Highlighted
Tourist
6 0 0

So Im trying to achieve something like the following..

https://imgur.com/a/REiEcRZ

 

in this pic i added the images with text coloums with images on the sections as this is what i want however the images are fullsize and i need them around this size while also being fully center. I edited the html to acheive this in inspect element but wouldn't know how to change it in the files without knowing which one im looking for. 

0 Likes
Highlighted

@TitanPlates I think - all you need is to specify the max width in the CSS and position centre (if you're not using this section anywhere else).
I could certainly look into it and help if you share the store URL. 

Sandeep | Certified Shopify Partner @ Jeronone Technologies
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
1 Like
Highlighted
Tourist
6 0 0
Hi mate, would be really appreciated if you could help us out. The website is www.titanplates.com.

Did you want me to re-add the images back onto the website ?

Billy
0 Likes
Highlighted
Tourist
6 0 0

@meetwebsurgeoni have added them back to website.

0 Likes
Highlighted

This is an accepted solution.

IF YOU ARE NOT USING THIS SECTION - Make the following classes in Theme.scss.css
PLEASE TAKE A BACKUP OF THE FILE BEFORE MAKING ANY CHANGE.

#1. Change height to 60px

@media only screen and (min-width: 750px)
.column-flex__image {
height: 60px;
}

#2. Change
height: 60px;
background-size: auto;

.column-flex__image {
position: relative;
height: 60px;
background-repeat: no-repeat;
background-size: auto;
background-position: top center;
}

Sandeep | Certified Shopify Partner @ Jeronone Technologies
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
1 Like
Highlighted
Tourist
6 0 0



/*============================================================================ Styles columns.liquid and gallery.liquid - Background images and positioning are handled with theme settings ==============================================================================*/ .column-flex { @include media-query($small) { @include flex-direction(column); } } .column-flex__image { position: relative; height: 200px; background: { repeat: no-repeat; size: cover; position: top center; } @include media-query($medium-up) { height: 380px; } } .column-flex__image--tall { height: 300px; @include media-query($medium-up) { height: 520px; } }

This is all i have for this, im not sure if its to your example thou ? @meetwebsurgeon 

0 Likes
Highlighted

@TitanPlates Did the solution work for you?

Sandeep | Certified Shopify Partner @ Jeronone Technologies
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
1 Like