Fix only mobile view

Site URL: https://www.infrasonicsound.com/

I LOVE the way my desktop view looks, but as soon as I switch to mobile, the main photo is blown out and 4 buttons that are supposed to be directly beneath each individual photo turn into 2 independent columns. How do I change the size of the photo ONLY on my mobile version and fix the orientation of these buttons?

How do you have the banner section set up?

The issue with the buttons is that on Fluid Engine (Squarespace's latest design editor) you have to edit the layout on mobile as well as on desktop. When you're editing the page, click the mobile toggle (top right) and rearrange the blocks. This mobile layout is completely disconnected from the desktop, and will need to be checked and adjusted when you make any changes/additions to every page.

Thank you for this! Managed to fix the buttons and that all looks great. Now the only issue is the banner size. I just have this picture as the background, so I need to find a way to resize the background when it's on mobile. Is there a way to do that?

Okay, so I managed to use some code to adjust the size, but now my image is shifted slightly to the left. How can I center the image on the mobile view? I have the code I have already used below:

@media screen and (max-width: 767px) {
    .homepage #page section:first-child {
        min-height:30vh !important;
        height: 40vh;
        margin-top: 15vh;
    }
}

On 10/8/2022 at 12:25 AM, Infrasonic said:

Okay, so I managed to use some code to adjust the size, but now my image is shifted slightly to the left. How can I center the image on the mobile view? I have the code I have already used below:

 

@media screen and (max-width: 767px) {
    .homepage #page section:first-child {
        min-height:30vh !important;
        height: 40vh;
        margin-top: 15vh;
    }
}

Change height: 40vh; to height: 30vh;

Thank you! This fixed my issue. I have one more question! I have a remote upload form on my site that looks great for desktop and is too large on mobile. How do I fix this?

On 10/11/2022 at 12:47 AM, Infrasonic said:

Thank you! This fixed my issue. I have one more question! I have a remote upload form on my site that looks great for desktop and is too large on mobile. How do I fix this?

We can adjust code for mobile. Which page do you use this form?

I use it on our upload portal. Here is the embedded code we use:

 <center> <iframe src="https://infrasonicsound.sharefile.com/remoteupload/921ded24-637a-48e1-88d8-ffc2be631296" frameborder="0" width="400px" height="800px" scrolling="auto" id="sfRemoteUploadFrame"></iframe> </center>
 

On 10/13/2022 at 3:00 AM, Infrasonic said:

I use it on our upload portal. Here is the embedded code we use:

 <center> <iframe src="https://infrasonicsound.sharefile.com/remoteupload/921ded24-637a-48e1-88d8-ffc2be631296" frameborder="0" width="400px" height="800px" scrolling="auto" id="sfRemoteUploadFrame"></iframe> </center>
 

 

Hi, Can you share link to page where you use this form?

Or try adding this to Design > Custom CSS

@media screen and (max-width:767px) {
	iframe[src*="sharefile"] {
		width: 100% !important;
}
}

THANK YOU!!!!!