Have the Images In Grid View instead of Straight On Mobile View

[MiaPascua]

Hi,

I'm using the Publisher theme and I would like to have the images in these 2 pages in grid view instead of a straight line.

See links below:

https://everlyadorned.com/products/permanent-jewelry-appoint.
https://everlyadorned.com/pages/find-your-wrist-size

We'd like to make it look like the screenshot below, with the texts still readable in mobile:

[saim007]

@MiaPascua Just follow the below steps-

1. Go to Online Store

2. Edit Code

3. Find and open theme.liquid file

4. Find </body> tag and above this tag paste below code

<style>
.grid--1-col .grid__item{
width: 50%;
}
.image-with-text__grid.grid {
    flex-wrap: nowrap;
}

@media(max-width: 749px){
.grid--1-col .grid__item{
width: 100%;
}
.image-with-text__grid.grid {
    flex-wrap: wrap;
}
}
</style>

Please let me know when works and like and mark as solve!

[MiaPascua]

I'm sorry but it didn't do anything.

[Akibhusen]

@MiaPascua, did not get your point.

Do you like to display the image and text in 50-50% in mobile view ?

like attached screenshot

[MiaPascua]

Yes, that's right. I need it for the 2 pages please

[saim007]

@MiaPascua Just copy and paste below code in your theme.liquid file above </body> tag and Save! Now design changes only applied on both pages only.

{% if request.path contains "permanent-jewelry-appoint" or page.handle contains "find-your-wrist-size" %}
<style>
.grid--1-col .grid__item{
width: 50%;
}
.image-with-text__grid.grid {
    flex-wrap: nowrap;
}

@media(max-width: 749px){
.grid--1-col .grid__item{
width: 100%;
}
.image-with-text__grid.grid {
    flex-wrap: wrap;
}
}
</style>
{% endif %}

[Akibhusen]

Add the below line of CSS code at the end of your base.css file.

@media(max-width:480px){
body .multirow section-template--19145620095285__c9d90c47-dede-4d1b-b1f5-fc88d1cb181b-padding .grid--1-col .grid__item,
body .multirow section-template--19118795718965__e5a338f5-c9f9-4159-9675-0adf97849022-padding .grid--1-col .grid__item{
	max-width: 50%;
	width: 50%;
}
body .multirow section-template--19145620095285__c9d90c47-dede-4d1b-b1f5-fc88d1cb181b-padding .image-with-text,
body .multirow section-template--19118795718965__e5a338f5-c9f9-4159-9675-0adf97849022-padding .image-with-text{
margin-bottom:30px;
}
}

JFYI, After setting the 2 columns for mobile view it really looks weird. see the screenshot below