Jump to content

Resize Gallery for Mobile

Go to solution Solved by Lesum,

Recommended Posts

Hello! I am hoping that someone can help me figure out how to resize the gallery page at the top of my index for mobile. I am using it as a carousel that will flip through different hero images on our new homepage. If you take a look at the attached pictures, it looks great on desktop and shows the full-width image, but on mobile, it zooms in and does not show the full-width image.

Is it possible to show the full-width image on mobile? 

Website: https://www.broadwaygreen.com/homepage-test

Password: test

Thank you!

Desktop.png

Mobile.jpeg

Link to comment
  • Replies 14
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

I tried troubleshooting a bit, but I am still stuck! I used the code below and it made the image show full-width on mobile which is exactly what I want, but now the green text block is missing over the image (see attached picture below). I think I am almost there! How can I edit this code to include the text block on mobile? 

Quote

@media screen and (max-width:640px) {

section#hero-carousel img {

    width: 100% !important;

    left: 0 !important;

    height: auto !important;

}

section#hero-carousel {

    height: 160px;

  }}

@media screen and (max-width:640px) {

  .tweak-index-gallery-controls-large-arrows .Index-gallery-control {

    top: 15% !important;

}

  }

/* remove spacer block mobile */

@media screen and (max-width:640px) {

#block-yui_3_17_2_1_1684386266765_1958 {

display: none;

}

}

IMG_0638.jpeg

Edited by laurlaurfl234
Link to comment

@laurlaurfl234 You can add this additional code snippet alongside the code you've already inserted:

@media only screen and (max-width: 640px) {
	section#hero-carousel .Index-gallery-wrapper {
		height: 18vh !important;
	}
	.tweak-index-gallery-controls-large-arrows .Index-gallery-control {
		top: 50% !important;
	}
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@Lesum thank you so much for your reply! I added your code below mine and unfortunately, it did not work. Attached is how it looks on mobile after adding your code below mine. Any other ideas? 

My goal is to still keep the green text box on top of the image when it switches to full-width on mobile. 

IMG_0639.jpeg

Edited by laurlaurfl234
Link to comment

@laurlaurfl234 It should have worked. Site style settings is most like blocking the code. Can you try this:

@media only screen and (max-width: 640px) {
	#collection-64657ccbf5577c3c363a713b section#hero-carousel .Index-gallery-wrapper {
		height: 18vh !important;
	}
	.tweak-index-gallery-controls-large-arrows .Index-gallery-control {
		top: 50% !important;
	}
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@laurlaurfl234 Just making sure again, did you add this block of code? Can you also maybe share a screenshot of the code you just added? 

#collection-64657ccbf5577c3c363a713b section#hero-carousel .Index-gallery-wrapper {
		height: 18vh !important;
}

This block of code fixes the issue when I tested on Chrome. 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@laurlaurfl234 Can you remove the previous code I wrote and add this:

@media only screen and (max-width: 640px) {
	#collection-64657ccbf5577c3c363a713b section#hero-carousel .Index-gallery-wrapper {
		height: 18vh !important;
	}
	.tweak-index-gallery-controls-large-arrows .Index-gallery-control {
		top: 50% !important;
	}
	#collection-64657ccbf5577c3c363a713b section#hero-carousel .Index-gallery-item {
		height: 18vh !important;
	}
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@Lesum I think you are getting closer! I see the green text box now on mobile, but the image is missing when it first loads in. I have to scroll on the page for the image to show up and even then, it is still cut off and the green box is too big.

If it is easier to just delete my code and start from scratch, then please do! I really appreciate the time you are taking to help me with this. 

IMG_0642.jpeg

IMG_0643.jpeg

Link to comment
  • Solution

@laurlaurfl234 Referring to the code screenshot you sent:

Can you add this line of code right after line 224 ("left: 0 !important;"):

top: 0 !important;

Can you change line 228 ("height: 160px") to this:

height: auto !important;

Can you also add this block of code:

@media only screen and (max-width:640px) {
	.Index-gallery-item-content {
		padding: 10px !important;
	}
	section#hero-carousel .Index-gallery-item * {
		font-size: 12px !important;
	}
}

Finally, can remove the last code I wrote and add this updated version (just changed 18vh to 45vw):

@media only screen and (max-width: 640px) {
	#collection-64657ccbf5577c3c363a713b section#hero-carousel .Index-gallery-wrapper {
		height: 45vw !important;
	}
	.tweak-index-gallery-controls-large-arrows .Index-gallery-control {
		top: 50% !important;
	}
	#collection-64657ccbf5577c3c363a713b section#hero-carousel .Index-gallery-item {
		height: 45vw !important;
	}
}
Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@Lesum thank you for this new code! I inserted it and the image is showing in full-width now, but the green box looks too big on mobile. Is there a way to change the size of the green box and text in it only on mobile, but keep it the same on desktop? I would like it to be smaller on mobile. 

Also, do you know why it loads in funny? Please take a look at the attached video. 

IMG_0645.jpeg

Link to comment

@laurlaurfl234 Adding this code will reduce font-size of the texts (You can adjust 12px in the code):

@media only screen and (max-width:640px) {
	section#hero-carousel .Index-gallery-item * {
		font-size: 12px !important;
	}
}

I've already reduced the size of the green box. The image height on mobile view is now small in proportion to the height of the green box. I don't see any other scope to decrease the size of the green box.

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@laurlaurfl234 It seems like custom code is taking longer to load on mobile which is most likely causing the issue. Not sure without checking if there're any redundant code that can be removed. 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.