Want the images on mobile site to appear in 2 columns rather than 1 - Support

Viewing 22 posts - 1 through 22 (of 22 total)

Author

Posts
July 31, 2017 at 4:54 pm #832244

farzanahmed
Participant

Hi
I’m migrating a site over to use the enfold theme as the previous theme I used was just EXTREMELY slow and sluggish; but I’m struggling to get the formatting of some aspects of it right.

Basically, I want the site in the private content to show as it does on desktops/laptops etc, but the 4 category sections and the ‘most popular’ items, I want to appear in two columns on smartphone screens?

I’m guessing some CSS will do that?
Thanks
Farzan

August 1, 2017 at 7:24 am #832636
Jordan Shannon
Inactive Moderator
Hey farzanahmed,

Add the following to quick css:
```
@media only screen and (max-width: 767px){
.responsive #top #main .products .product {
    margin: 0 0px 20px 0;
    width: 50%;
}
}
```
Best regards,
Jordan Shannon
August 1, 2017 at 9:12 pm #833067

farzanahmed
Participant

Hi Jordan

Thanks for that – that’s close, but not quite what I need.

I need the top area that says “Apple/fitbit/samsung/gadgets” etc to go on to two columns as well, and also I want it to do it for smartphones too – at the moment it looks like its doing it for tablets but not on the small screen?

The url in the private content area is basically what I want it like :)

Thanks
Farzan

August 2, 2017 at 10:18 pm #833646
Jordan Shannon
Inactive Moderator
Hi,

The following should take care of the top area also. It is also written so that it does in fact work on mobile:
```
@media only screen and (max-width: 767px){
#top #wrap_all .flex_column{
    width: 48%!important;
    float: left!important;
    margin-right: 5px!important;
}


.responsive #top #main .products .product {
    margin: 0 0px 20px 0;
    width: 50%;
}
}
```
Best regards,
Jordan Shannon
January 3, 2018 at 6:02 pm #892893

ngavy
Participant

Hello. there.

I have tried them all but still, have some problem on homepage main.

I did 2 columns for woocommerce products.

but I couldn’t solve the 4 pics made by the avia builder which set 4 columns in desk view.

I want them 2 columns on a mobile device(responsive but I don’t know how to do it.

Please check out my site.

I

January 3, 2018 at 10:45 pm #892933

Jordan Shannon
Inactive Moderator

Hi,

Can you link or screenshot the exact section you need help with?

Best regards,
Jordan Shannon

January 4, 2018 at 2:19 am #893032

ngavy
Participant

thanks for your reply Mr. Jordan

I gave you my homepage in private content.

http://www.ngavy.com

first home page.

next to video(downside)

there are 4 pictures. and I want them 2 columns on mobile.

sorry I don’t know update screenshot here.

January 4, 2018 at 6:46 pm #893324
Jordan Shannon
Inactive Moderator
Hi,

Add this to quick css:
```
@media only screen and (max-width: 767px)  {
#av_section_2 .flex_column.av_one_fourth{
width:50%!important
}}
```
Best regards,
Jordan Shannon
January 5, 2018 at 3:55 am #893546

ngavy
Participant

thanks again. it worked. but I need little help for that.
now it shows 2 columns but between them, there is no space.
two pictures are attached as one.
please let me know how to make space btw them.
and thanks again for your respond.

http://www.ngavy.com

January 5, 2018 at 9:11 am #893603
Rikard
Keymaster
Hi,

Thanks for the feedback. Please try this instead:
```
@media only screen and (max-width: 767px)  {
#av_section_2 .flex_column.av_one_fourth {
  width:48% !important;
  margin-right:2% !important;
}
}
```
Best regards,
Rikard
January 5, 2018 at 9:18 am #893605
ngavy
Participant
sorry.
- This reply was modified 6 years, 11 months ago by ngavy.
January 5, 2018 at 1:16 pm #893704

ngavy
Participant

sorry. I need related product also 2 columns on mobile in single product pages

I thought I could do that but apparently not.

could you help me that for me?

http://ngavy.com/product/ethiopia-mormora-natural/?preview_id=1686&preview_nonce=238dd2a0ec&_thumbnail_id=1581&preview=true

please.

January 5, 2018 at 10:37 pm #893858

Jordan Shannon
Inactive Moderator

Hi,

Did Rikard’s solution fix the first request?

Best regards,
Jordan Shannon

January 6, 2018 at 7:55 am #893981

ngavy
Participant

yes. it worked. but another problem showed up as I wrote right before you reply.

I will repeat again and hope you can help. thanks.

“sorry. I need related product also 2 columns on mobile in single product pages

I thought I could do that but apparently not.

could you help me that for me?

http://ngavy.com/product/ethiopia-mormora-natural/?preview_id=1686&preview_nonce=238dd2a0ec&_thumbnail_id=1581&preview=true

please.

“

January 9, 2018 at 12:06 am #894977

Jordan Shannon
Inactive Moderator

Hi,

I’m receiving an error from the link you provided above.

Best regards,
Jordan Shannon

January 9, 2018 at 1:03 am #895040

ngavy
Participant

Hi.

all products have ‘related product’. this is what I want to change 2 columns in a mobile view.

Please follow this.

인도네시아 만델링 G1

에티오피아 모모라 내추럴

코스타리카 따라주

피렌체 은가비 블랜딩

and so on.

January 10, 2018 at 2:01 pm #895665

ngavy
Participant

Hi. Jordan. I am still waiting for your answer. please reply this.

I need related product also 2 columns on mobile in single product pages

I thought I could do that but apparently not.

could you help me that for me?

all products have ‘related product’. this is what I want to change 2 columns in a mobile view.

Please follow this.

코스타리카 따라주

January 12, 2018 at 10:51 am #896502
Ismael
Moderator
Hi,

Thank you for the info.

Please use the following css code to adjust the width of the related product columns.
```
@media only screen and (max-width: 479px) {
    .responsive #top #main .products .product {
        margin: 0 0 20px 0;
        width: 49%;
    }
}
```
Adjust the css values if necessary.

Best regards,
Ismael
January 12, 2018 at 11:02 am #896508

ngavy
Participant

thanks. Ismael. finally, I did all I want.

January 12, 2018 at 9:52 pm #896692

Jordan Shannon
Inactive Moderator

Hi,

Did you need additional help or shall we close this topic?

Best regards,
Jordan Shannon

January 13, 2018 at 2:46 am #896770

ngavy
Participant

I have some but not on this issue. you can close and I will open another. thanks.

January 14, 2018 at 4:06 am #896997

Rikard
Keymaster

Hi,

Thanks for the feedback, I’ll close this thread for now then.

Best regards,
Rikard
Author

Posts

Viewing 22 posts - 1 through 22 (of 22 total)

The topic ‘Want the images on mobile site to appear in 2 columns rather than 1’ is closed to new replies.