Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
So Im trying to achieve something like the following..
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.
Solved! Go to the solution
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;
}
@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.
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;
}
/*============================================================================ 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
@BillyM8 Did the solution work for you?