How to make custom content adapt from horizontal to vertical on mobile view

Store Design
1

Hello,

How can I adapt my custom content (trust badges in this case) to appear vertical on mobile view instead of horizontal? When they appear horizontally on mobile view they are too small and it looks unprofessional.

I am using the Brooklyn theme.

If anyone knows how to fix this I would greatly appreciate their help :slightly_smiling_face:

2

Hello @Artron

Hope you are well !!

Could you please provide your store URL. so I can make CSS for mobile view for a vertical badge

Thank you

3

Thank you for replying so quickly. My URL preview:

https://2lyjzt1gzmv8msbp-59284684983.shopifypreview.com

4

Thank you for sending URL.

I have checked and you have uploaded that icon as a whole image so we have two solutions for that.http://prntscr.com/1vz4r8y

  • Make the image with a vertical icon and change it for mobile view
  • Make 4 icons and create 4 horizontal columns and upload them so for the mobile view we can add our custom CSS .
5

Thank you for the suggestion, I really appreciate it. I will make another vertical image and upload it to mobile view. I’m sorry to ask an easy question, but how do I edit only the mobile version. How would I upload the vertical picture on the mobile version while retaining the horizontal image on desktop view?

6

No problem @Artron

So you can do it 2 way

  • So add js code for mobile device
var windowWidth = window.innerWidth;
  if(windowWidth < 500)
  {
    document.getElementById('your image').src='new image source';
  }
  else
  {
    document.getElementById('your image').src='new image source desktop';
  }
  • Below that image creates a new image tag and give the name “mobile_badge” and hide that image for desktop and make it visible for mobile. don’t forget upload vertical image

.mobile_badge {
  display:none;
}
@media screen and (min-width:240px) and (max-width:767px) { 
.mobile_badge {
  display:block;
}
.Worldwide_Shipping_5  {
  display:none;
}
}​
7

Thank you for the advice. I must admit I’m a complete novice with coding. I made a complete mess when I tried to follow your instructions. Is there anyway you can fix my mess? or simplify the instructions for a complete beginner?

8

Ok, I’ll fix it. I need access of your store and you can hire me for that

9

Ok, how do I hire you to fix it? I’m sorry but I’m completely new to shopify

10

@Artron Follow below steps

Find this code in file

Worldwide_Shipping_5
Worldwide_Shipping_52025×267 22.4 KB

below this image put

mobile_badge

add this code on your “timber.scss.css” file

.mobile_badge {
display:none;
}
@media screen and (min-width:240px) and (max-width:767px) {
.mobile_badge {
display:block;
}
.Worldwide_Shipping_5 {
display:none;
}
}​

If you still facing difficulty let me know

11

Could you please share your email?I’ll send my detail to your email

12

I tried your instructions but the webpage became distorted. I must have done something wrong. My email address is arin93@gmail.com

13

Ok, I’ll fix it but I have left my office. so I’ll get you back till then you can revert back your changes

14

Ok I reverted back the changes. When you are back in your office let me know :slightly_smiling_face: