centerpoint1

Thank you @tuanphan. Any way you could explain where I went wrong? I am trying to teach myself all of this and I'd love the opportunity to learn for the future.

I have successfully used CSS to change the background to an image for a page that appears in an index. https://www.centerpointfl.org/students #summer-nights { background-color: #dc877c; background-image: url(https://images.squarespace-cdn.com/content/595d0a2f36e5d3ffb4b16e08/2b004caf-fbaa-4b8d-a29d-824b9e348bf1/Gradient+2.png?content-type=image%2Fpng) !important; background-size: cover; background-repeat: no-repeat; background-position: center center; h1 { color: #fff !important; } h3 { color: #f7c3b6 !important; } h2 { color: #fff !important; } p { color: #fff !important; } } The page appears just as I'd like when scrolling through the index and arriving to the page. But when I use a direct link to the subpage(/summer-nights), the background image no longer appears. I've tried adding this to the Head Injection for the Summer Nights page. That didn't work. <style> .Main { background-color: #dc877c; !important; background-image: url(https://images.squarespace-cdn.com/content/595d0a2f36e5d3ffb4b16e08/2b004caf-fbaa-4b8d-a29d-824b9e348bf1/Gradient+2.png?content-type=image%2Fpng) !important; background-size: cover; background-repeat: no-repeat; background-position: center;} h1 { color: #fff !important; } h3 { color: #f7c3b6 !important; } h2 { color: #fff !important; } p { color: #fff !important; } </style> Any ideas???

I finally fixed it yesterday--just came here to post! Thanks for taking a look, though! I appreciate it!

Site URL: https://www.centerpointfl.org OK, so I have three social media platform buttons in a gallery block. I have them displayed 3 across, and a small size. Looks great on desktop and tablet, but on mobile it changes the gallery to display 2 icons across, incread of 3. I have tried MULTIPLE solutions and I can't get anything to work. Please help! What I've tried: /*To set the amount of slides for phones*/ @media screen and (max-width: 640px) { .sqs-gallery-block-grid.slide.sqs-gallery-design-grid-slide { width: calc(100%/ This produced no change at all. Also: @media only screen and (max-width: 640px) { .sqs-gallery-design-grid-slide { width: 33.33% !important; } } It got it to three items but cut them into pieces. I then modified it to: @media only screen and (max-width: 640px) { .sqs-gallery-design-autogrid-slide { width: 33.3% !important; clear:right !important; } .sqs-gallery-block-grid { overflow: visible } } Did nothing. I don't know what else to try, so any help would be greatly appreciated. I am a coding toddler, so talk slowly in small words. 🙂 Running Bryant template, in case that matters.