Custom Icons with Text and Header On homepage

Retired Boards Appdev Custom Storefronts
1

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.

2

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

1 Like
3

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

4

@meetwebsurgeon i have added them back to website.

5

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

1 Like
6 

/*============================================================================
  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

7

@BillyM8 Did the solution work for you?

1 Like