Resize Gallery for Mobile

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!

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;

}

}

@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;
	}
}

@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. 

@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;
	}
}

@Lesum I just tried inserting the new code and no luck.... 😭

It still looks the same as the most recent screenshot in this thread. 

@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. 

@Lesum of course! Here is a screenshot of my code. I inserted your code right below the code that I shared in my first reply on this thread. Do I have to remove my code and only have your code in there? I also shared a screenshot from the Google Chrome app on my phone and it still looks odd. 

@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;
	}
}

@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. 

@laurlaurfl234 Also please change line 225 ("height: auto !important;") to this:

height: 100% !important;

@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. 

@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.

@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.