different text arrangement on mobile vs desktop

[PhMA]

dear community

Im using refresh theme and Im having a richt text section on homepage which is formatted as “text center” on desktop which works fine for desktop. but for mobile view it should not be text center but rather on the left side and same as the previous text block. how can I only change this on mobile?

see screenshot from mobile:

red marked part should be ONLY on mobile same formatted as above section

then I have another question:

how to change the text size and formatting and position on the hero image again only for the mobile screen?

see mobile screenshot here you can see that text is all over… how can I choose for the mobile view a different aspect of the hero image and re-arrange the text differently? maybe even use less text thand for the desktop version?

then for desktop online;Collapsible content section → how can I adjust position of image? how can I move the image a bit more up so its more centered and inline with the text content on the left? I only want to make this change for that very particular section → not for all those section or the whole theme… thanks

many thanks

[PhMA]

link to preview: https://8trcp9378798kixh-61049766108.shopifypreview.com

[BSSCommerce-HDL]

Hi @PhMA ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[PhMA]

I dont have the tagg, only ?

pls indicate the code line number and highlight the part I need to replace with this new code, many thanks

also can you support me with my second question about text behavior on mobile for hero image, many thanks

[BSSCommerce-HDL]

@PhMA , You can insert it inside tag

[PhMA]

hello

so I need to insert it after the tag?

see screenshot → yellow marker

[PhMA]

@BSSCommerce-HDL thanks for clarification