Leslie1570048145

hello, XIStudio was incredible last week helping me figure out how to keep a text block from bumping to the top when the screen was small (mobile). I still have one more issue with that same text. The words break when the screen is "smaller" than full screen on my iMac - like full screen on my 15" MacBook Pro. I need these words to NEVER break. I have this design on 2 pages. https://www.gastingerwalker.com/our-projects-copy https://www.gastingerwalker.com/services-2 I also have noticed that on the projects page, "GOVERNMENT" is a smaller font size than the rest when looking at as small as it will go. I am hoping to finally go live with this tomorrow!!

I am sorry, I do not know how to do that

https://gastinger-walker1981.squarespace.com/config/ https://gastinger-walker1981.squarespace.com/config/website/pages do these work?

Hello!!! I need some help figuring out how to fix the type bumping to the top of the image when the screen is small or viewing on a mobile device. Wondering if there is a way to keep the type to the left of the image so that the text block does not bump to stack when the screen is smaller. Also, is there a way to keep the lines/words from breaking? There are two places I use this design - links are here: https://gastinger-walker1981.squarespace.com/our-projects-copy https://gastinger-walker1981.squarespace.com/config/website/pages This is one of the last things I need to adjust before we go live - this has been over a year in the making and eager to finish this project. Any and all help is greatly appreciated. Thank you so much!!!!

That worked! Thank you

sorry, I thought I did. https://www.gastingerwalker.com/contact

Hi all, How can I get the images to align with the names/titles above? The text boxes and images are aligned but the text does not start right at the edge. There seems to be some padding and I am not sure how to fix.

yes! like that. I know there was a similar question asked a few months ago you helped with but hers was an image change when hovering over navigation text and I wasn't sure if the code was the same.

Site URL: https://raspberry-teal-xm6r.squarespace.com/projects Below is my compromise but would love it if the images swapped only when hovering over the correlating word. Would appreciate any advice. Thank you https://raspberry-teal-xm6r.squarespace.com/projects password : lbeck

I am looking to do something similar but not with navigation. Below is my compromise but would love it if the images swapped only when hovering over the correlating word. Will the above code work or do I need to edit it? Thank you https://raspberry-teal-xm6r.squarespace.com/projects password : lbeck

Thank you. I will try that.

Still looking to resolve this... does anyone have any suggestions? Please and thank you

No I have not.

I am trying to create a page that populates with projects tagged with a certain service. I am building a site that is organized by sectors (work, live, learn, heal, play) that we have divided our work into but would like to be able to click on a word from a "services" list and it would link to a page that populates projects from across all of the sectors that have the same keyword attached to it. Our project pages are not set up as products or blog pages so the summary block isn't working. Are there other ways to do this? thank you

Site URL: https://sturgeon-panda-ke2f.squarespace.com I am wanting to decrease the space that is between my main nav and the drop down sub nav. I have been unable to figure this out. decreasing the padding doesn't do it. this is a temp site I am using to make edits before I make changes to our live site. password to view the site is Beck123

thank you!

Site URL: http://www.gastingerwalker.com/ currently our drop down menu is a column that feels intrusive an bulky. I would like it to be a row - see mock up image attached

Thank you!

hi there! thank you for this!!! It worked on one of the pages but not all that have this bar. Thoughts?

It is also happening on the pages I have added for new employees. Their email address at the bottom of their individual pages should be gray until hover but the new ones I have added are not doing that.

here is all of the CSS that has been added to the site. Where would your suggestion go in here? .sqs-block-summary-v2 { .summary-title, .summary-heading { font-family: "arial"; font-size:20px } } // Zoom in and saturate img[alt*=".."] { -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; // opacity: 0.7 !important; filter: grayscale(.35); -webkit-filter: grayscale(35%); -moz-filter: grayscale(.35); -o-filter: grayscale(.35); -ms-filter: grayscale(.35); } img[alt*=".."]:hover{ transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); //opacity: 1 !important; filter: grayscale(0); -webkit-filter: grayscale(0%); -moz-filter: grayscale(0); -o-filter: grayscale(0); -ms-filter: grayscale(0); } // Zoom out and desaturate img[alt*=".:"] { -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; // opacity: 0.7 !important; transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); filter: grayscale(100); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100); -o-filter: grayscale(100); -ms-filter: grayscale(100); } img[alt*=".:"]:hover{ transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); //opacity: 1 !important; } // Slide img[alt*=".-"] { margin-left: 0px; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margin 1s ease; transition: margin 1s ease; } img[alt*=".-"]:hover{ margin-left: -200px; } // Blur img[alt*=".+"] { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; } img[alt*=".+"]:hover{ filter: blur(5px); -webkit-filter:blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); } // Grey to colour img[alt*="./"] { filter: grayscale(100); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100); -o-filter: grayscale(100); -ms-filter: grayscale(100); -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -o-transition: all .25s ease; -ms-transition: all .25s ease; transition: all .25s ease; } img[alt*="./"]:hover{ filter: grayscale(0); -webkit-filter: grayscale(0%); -moz-filter: grayscale(0); -o-filter: grayscale(0); -ms-filter: grayscale(0); } .sqs-block.image-block { padding-top:5px !important; padding-bottom:5px !important; padding-left:4px; padding-right:4px; }

I am so sorry I am just now responding. Our website updates took a back seat for a little bit. http://www.gastingerwalker.com/work when you hover over an image square a black bar comes up from the bottom of the image. Would love it to be white with black text

Site URL: http://www.gastingerwalker.com/contact I inherited an already built site and I needed to update the contact info. The email and phone numbers for each person are images. Before I updated with new info, they were gray until you hovered over them and they turned blue. Now the ones I have updated are blue all the time. * the actual image is blue (white background blue text) so looks like the code makes it gray until hover. would love some direction on how to fix this. Thanks!

Site URL: http://www.gastingerwalker.com/ I am wanting to change the color of the overlay box from black to white and the text color from white to blue.