Advice on mobile versus desktop display

Hi everyone, 

I have just realised that by changing text size etc in mobile view, that it replicates that for the desktop view and so I have been mindful of this and I have only rearranged blocks where possible so that both views don't look completely distorted. 

However, I am not so tech savy and when I wanted to add in arrows for a diagram, I had to upload an image of an arrow that I liked (from a carousel template on squarespace) - these arrow images are appearing very large on the mobile view and it looks very out of place. 

Wondering if anyone could shed some light on my query please -

I am also not sure how to share my draft website so copying this link here and hopefully it works! 😬

https://mouse-snail-xcg2.squarespace.com/config/

Thanks a mil,

Maeve

The site is private. Can you setup an access password? We can access easier

Hi @tuanphanthank you very much for your help on the url password & apologies for my slow reply. Life got in the way! 

The password is @Nnie2023! 

Any tips on how to maintain some sort of consistency across both mobile & desktop view would be really appreciated. 

Am I correct in saying that we cannot edit either view in isolation of the other? 

Thanks

Maeve

12 hours ago, Maeveoflaherty said:

Hi @tuanphanthank you very much for your help on the url password & apologies for my slow reply. Life got in the way! 

The password is @Nnie2023! 

Any tips on how to maintain some sort of consistency across both mobile & desktop view would be really appreciated. 

Am I correct in saying that we cannot edit either view in isolation of the other? 

Thanks

Maeve

You mean resize these arrows on mobile

small like this?

https://mouse-snail-xcg2.squarespace.com/?noredirect

Just now, Maeveoflaherty said:

Yes these are the arrows I would like to make smaller! 

In general, is it possible to resize text within a text box? Also struggling with this.

Do you know if the answer to some of my queries can also be found in a squarespace workshop? ("Getting Started" for example)

Thank you very much for your help 

Maeve

Thanks @tuanphan

15 hours ago, Maeveoflaherty said:

Thanks @tuanphan

You can use this code to Website > Website Tools > Custom CSS

/* mobile arrows image */
@media screen and (max-width:767px) {
img[src*="arrow+image"] {
    width: 100px !important;
    left: 50%;
    transform: translateX(-50%);
}}

Thanks @tuanphan - for some reason when I input this code, the arrows although smaller, are still distorted. 

I dont want to bother you with my ongoing query but if there is any other avenue for help that would be great appreciated

Thanks

@Nnie2023! 

https://mouse-snail-xcg2.squarespace.com/?noredirect

It looks fine to me. You try checking it outside edit mode or in incognito window

hi @tuanphan thanks for your reply.

So in the end I deleted the recommended custom code and manually edited it in mobile view (as I had done before) and for some reason it didn't make the same changes in desktop view - which is what I wanted! Still clueless as to why, but got the result I wanted!! 😊

Thank you very much for your help & time

Maeve