CSS help with columns

Solved
Highlighted
Excursionist
45 0 8

Hi Guys

I need a bit of help getting a column to align and to order/stack correctly.

Any help would be great!

Many thanks

0 Likes
Highlighted
Trailblazer
304 73 85

Hi @jamescox1981 

Please share your site URL and Issue,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
Excursionist
45 0 8

Hi Vikas

I am trying to style my about page for iPad landscape.

This is the page: https://fibsupplements.com/pages/about

Password: Fib01!

The mobile version and desktop look great.

But for the iPad landscape media query, I would like the column and the image to stack in the same order and style as mobile.

The media query i am looking to style is between 768px and 1300px.

Thanks for any help you can provide!

 

0 Likes
Highlighted
Trailblazer
304 73 85

This is an accepted solution.

Hi @jamescox1981 

1. Go to Online Store->Themes->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (min-device-width: 769px) and (max-device-width: 1300px){
	.feature-row__item {
	    margin-bottom: 20px;
	}
	.feature-row__item {
	    flex: 1 1 auto;
	    max-width: 100%;
	    min-width: 100%;
	}
	#shopify-section-page-sections-template .feature-row__text {
	    background-color: black;
	    padding: 20px;
	    border-radius: 0px;
	    color: white;
	    max-width: 330px !important;
	    margin-top: -50px;
	    z-index: 10;
	}
	.feature-row {
	    flex-direction: column;
	    margin: 0;
	}
	#shopify-section-page-sections-template .feature-row-wrapper {
	    overflow: visible;
	    margin-bottom: 20px;
	}
	.feature-row__text {
	    order: 2;
	}
}
If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
Excursionist
45 0 8

Fantastic! 

Thank you very much!!

1 Like