Desktop and Mobile Differences

Site URL: https://elliotcoulterphotography.com/

Hi there, 

I have been searching the square space forum, and I couldn't find a solution to my issue, and I was wondering if anyone could help me at all?

I have a slideshow at the top of my website (elliotcoulterphotography.com) of a few different images, but when it comes to viewing it on mobile, those images become incredibly cropped and unusable. I have seen a post where people use one header video for web, and another for mobile, and I was wondering if that could apply to the slideshow on my home page; one slideshow for web, and one for mobile?

I have also been having trouble with the way the mobile variant of my site structures my site, and wondered if anyone would be able to help me with that at all?

Thanks a million in advance,

Elliot

🙂

Add to Home > Design > Custom CSS

/* resize mobile slide */
@media screen and (max-width:767px) {
.homepage .gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 30vh !important;
}
}

Thank you very much @tuanphan, that has seemed to work, but the other elements of my mobile site are now out of scale. The next element down '[what do we do?]' looks huge in comparison, and I was wondering if there is any way of reproducing this in the same scale as the web version?

I was also wondering if there was a way to change the '[featured projects]' element of the site so that they appear in a row, like the web version, rather than a collumn?

Thank you so much again for your help,

Elliot

Anyone able to help with this? Would be much appreciated 🙂