How do I change ticker image size on mobile screen

[tyricehicks]

How can I adjust the ticker image size on a mobile screen in Spotify?

https://957edc.myshopify.com/

[PageFly-Noah]

Hi @tyricehicks 

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media screen and (max-width: 767px){
#section-template--20608619249971__1ad0a12f-5a19-4db9-8b64-fbea10a95fd3 .ticker__svg {
width: 50px;
height: 50px;

}
}
</style>

Hope this can help you solve the issue 

Best regards,

Noah | PageFly

[Anshul_arora]

Hello @tyricehicks ,

I understand you are looking to change the ticker image size on the mobile screen.

This can be done by making changes in the height & width of these image classes in the .css file of your store.

1. Go to Online Store -> Themes-> click on 3 dots -> Edit code.

2. Search for the .css or theme.liquid file.

3. Next find the below mentioned tag class and make the appropriate changes -:

@media screen and (max-width: 575px)
#section-template--20608619249971__1ad0a12f-5a19-4db9-8b64-fbea10a95fd3 .ticker__svg {
width: 30px;
height: 30px;
}

[ Note: In this class tag first remove the existing used property max-width: 60%; https://prnt.sc/t2J72vJsyFmi  and then apply height and width property]

Output - https://prnt.sc/wgoxlVsFwO-5

@media screen and (min-width: 576px)
#section-template--20608619249971__1ad0a12f-5a19-4db9-8b64-fbea10a95fd3 .ticker__svg {
width: 55px;
height: 55px;
}

Output - https://prnt.sc/zGidH-TnMpyZ

I have also seen in the desktop version the ticker image size is very small https://prnt.sc/FEtTo_KQeCaI , if you also want to change that size in desktop screen then you have to change existing css with the below mentioned -:

@media screen and (min-width: 1360px)
#section-template--20608619249971__1ad0a12f-5a19-4db9-8b64-fbea10a95fd3 .ticker__svg {
width: 35px;
height: 35px;

}

Output - https://prnt.sc/ki-zUqiP-YQw

[Note -: While changing the css you have to focus on screen resolution https://prnt.sc/KsoxRB01Gn-S  and make changes in tag class' height and width https://prnt.sc/Zu3C3yxv08oN  , you can also change height & width pixel as per your choice]

4. Save the changes.

I hope the solution helps you.

Please let me know if you need any assistance

Thank you.

[websensepro]

Hi, @tyricehicks.

You can follow these steps:

Go to Online Store -> Themes -> Edit code.

Go to Assets folder -> Base.css  file.

Add the following code at the bottom of the file.

only screen and (min-width: 767px) {

.about {
    padding: 2rem 2rem 8rem;
}

section#shopify-section-template--20608619249971__1ad0a12f-5a19-4db9-8b64-fbea10a95fd3 p {
    font-size: 14px;
    padding: 20px 0px;
}


}

Result:

If I managed to help you then, don't forget to Like it and Mark it as Solution.