Re: Custom Icons with Text and Header On homepage

Solved

Custom Icons with Text and Header On homepage

BillyM8
Tourist
10 1 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. 

Accepted Solution (1)
meetwebsurgeon
Shopify Partner
8 1 4

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

View solution in original post

Replies 6 (6)

meetwebsurgeon
Shopify Partner
8 1 4

@BillyM8 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
BillyM8
Tourist
10 1 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
BillyM8
Tourist
10 1 0

@meetwebsurgeoni have added them back to website.

meetwebsurgeon
Shopify Partner
8 1 4

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
BillyM8
Tourist
10 1 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 

meetwebsurgeon
Shopify Partner
8 1 4

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