mikevatech

July 21, 2023

Creedon, I had to revert back to the original embedded code which opens the PDF in Google Docs because that is the only way it resizes for the phone/devices. See my first message in this thread for screen shots. So, it still has the gray background. I would like to either change the gray background to white or resize the pdf to fill the block so the gray background doesn't show. Changing the width and height attributes doesn't do anything. Absolutely no changes. Do you have any suggestions for me?

July 21, 2023

Really appreciate your help. Tried both solutions you provided. Both look fine on the monitor but neither resized for the device view. I made sure to refresh and even closed out and then reopened on the phone. Phone view looks like this. Only showing the upper left corner.

July 21, 2023

Thank you Creedon. I uploaded the PDF directly to my library in Squarespace and then embedded it. That solved the problem of the gray background around the PDF. However, now the PDF does not appear correctly on the phone. It does not resize for devices. I changed the width to 50% and some other settings but it does not change. It appeared correctly on devices before, when the PDF resided on Google Docs. So, is it one or the other? Here is a screen shot of the embed data pointing to PDF residing on Squarespace.

July 21, 2023

I embedded a PDF which shows a gray background on a monitor. I would like the background to be transparent or white. I know how to adjust the sizing inside the embed data box but can't change the gray background. I'm not sure if I need to change it in the embed data box or in the Custom CSS section of the site. Regardless, I've tried both and failed. I need the CSS and where to put it. Can anyone please help me?
Thank you very much,
CJ

https://michael-james-4flv.squarespace.com/config/pages

https://www.blueridgeresearch.com/careers

December 2, 2021

Site URL: https://www.blueridgeresearch.com/home2

When viewed on my phone, my site has a black bar between each banner image on the Index page using scrolling parallax. (See bottom of image below with red arrow) It looks fine on the desktop. I have tried adjusting padding, etc. in the site styles but nothing has worked. Does anyone have CSS code that will close up the space between banner images on the Index page in mobile view? I appreciate any help I can get. Thank you very much.

htpps://www.blueridgeresearch.com/home2

tuanphan · November 23, 2021

Just in case someone else has this same question, this is what Tuan sent to me. Worked perfectly!

Add to Design > Custom CSS > Then save & reload the site

/* Increase video size */

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

div#block-yui_3_17_2_1_1637432174041_10451 .summary-thumbnail-container {
width: 100% !important;
}

}

November 22, 2021

Tuan,
The URL to the page is https://www.blueridgeresearch.com/nepa-ea-eis.
Thank you for looking at this.

November 22, 2021

13 hours ago, mikevatech said:

Site URL: https://www.blueridgeresearch.com/nepa-ea-eis

I have a video inside a Summary block that looks fine in the computer view but is tiny in the mobile view. I tried it with the Youtube embed code and also with the simple Youtube URL. Either way, it will not appear full width in mobile view (while inside the Summary block). I searched this help section and tried modifying different bits of CSS but nothing worked. The URL to the page in question is - https://www.blueridgeresearch.com/nepa-ea-eis. Again, it looks fine on the computer, but not in mobile view (see screen shot below). Tuan recently gave me some CSS to make the Summary block wrap correctly in mobile view and that is working fine. Is there something I can add to that code to make the video full width? Here is the CSS I'm using to control the Summary block in mobile view.

I struggled with this for hours today. It seems like it should be a simple fix but I'm just not smart enough to figure it out. Please help me if you can. Thank you all for your expertise. Us regular people truly appreciate you!

// Summary block wrap on device //
@media screen and (max-width:640px) {
.sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container {
width: 100% !important;
margin-top: 15px;
top: 0 !important;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
float: none !important;
width: 100% !important;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container img {
width: 100% !important;
height: auto !important;
top: 0 !important;
left: 0 !important;
}
}

Tuan,

The URL to the page is https://www.blueridgeresearch.com/nepa-ea-eis.
Thank you for looking at this.

November 22, 2021

Site URL: https://www.blueridgeresearch.com/nepa-ea-eis

I have a video inside a Summary block that looks fine in the computer view but is tiny in the mobile view. I tried it with the Youtube embed code and also with the simple Youtube URL. Either way, it will not appear full width in mobile view (while inside the Summary block). I searched this help section and tried modifying different bits of CSS but nothing worked. The URL to the page in question is - https://www.blueridgeresearch.com/nepa-ea-eis. Again, it looks fine on the computer, but not in mobile view (see screen shot below). Tuan recently gave me some CSS to make the Summary block wrap correctly in mobile view and that is working fine. Is there something I can add to that code to make the video full width? Here is the CSS I'm using to control the Summary block in mobile view.

I struggled with this for hours today. It seems like it should be a simple fix but I'm just not smart enough to figure it out. Please help me if you can. Thank you all for your expertise. Us regular people truly appreciate you!

// Summary block wrap on device //
@media screen and (max-width:640px) {
.sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container {
width: 100% !important;
margin-top: 15px;
top: 0 !important;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
float: none !important;
width: 100% !important;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container img {
width: 100% !important;
height: auto !important;
top: 0 !important;
left: 0 !important;
}
}

November 19, 2021

On 11/14/2021 at 10:07 PM, tuanphan said:

Hi,

Can you share link to page in screenshot?

Tuan,
Believe it or not I solved most of my problems with the Summary Block presentation on the device. I actually found an old post of yours that helped and I was able to modify it. I only have one remaining problem with this. Links within my Summary blocks are not underlined, and not blue. The rest of my site has blue underlined links. The links work, they just are not following the link style I set for my site. Here is an example page that shows a Summary block.

https://www.blueridgeresearch.com/our-team-content

The "email" and "Linkedin" links do not have a style at all. I searched but can't find an answer to this. I hope you can help me. Thank you very much.

November 17, 2021

On 11/14/2021 at 10:07 PM, tuanphan said:

Hi,

Can you share link to page in screenshot?

Hello Tua,

Thank you for looking at this. The page is https://www.blueridgeresearch.com/about. Scroll down to MEET THE TEAM. I also wonder why the email and linkedin links are not blue and underlined like the rest of the links on the site. Do links in a Summary block not follow the link style set for the site? If not, is there CSS that will force links in a Summary block to follow the link style set for the site?

Thank you again. I truly appreciate your time.

November 16, 2021

Hello Tuaphan,

Thank you for looking at this. The page is https://www.blueridgeresearch.com/about. Scroll down to MEET THE TEAM. I also wonder why the email and linkedin links are not blue and underlined like the rest of the links on the site. Do links in a Summary block not follow the link style set for the site? If not, is there CSS that will force links in a Summary block to follow the link style set for the site?

Thank you again. I appreciate your time.

November 12, 2021

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

I am looking for CSS to make the text wrap around the image in a Summary block. It looks fine without wrapping on a monitor but on the phone and tablet the text is in a narrow column on the right side of the image. I want it to wrap around the image and fill in all the white space on the left. The code can apply to all Summary blocks on the site. I figured out how to make the Summary block stack in the phone view, but that doesn't affect the tablet view.

Don't have a direct URL to the page yet. I'm still playing with it. But, pretty straight forward. Wrap text around the images in Summary blocks, site-wide. I have attached a screen shot of the phone view and tablet view below that show wasted space.

Thank you very much for any help you can give me.

iamdavehart · August 9, 2021

On 8/7/2021 at 6:47 PM, iamdavehart said:
Hi,

you can mostly do what you're talking about with CSS. CSS is for the most part only for changing style and adding new content in isn't really its strength. for that you'd want to start using javascript, and it gets more complicated, requires a premium/business plan and personally I think the JS solutions are often trying to make Squarespace do something it doesn't want to do, which makes it harder to maintain etc.

So, assuming you've rationalised all that and really want to make it do something it doesn't currently do then here's a CSS only way of getting what you want. I tested this with a summary block set to grid. I've used your block id, but if you change things around you'll obviously need to update it.
#yui_3_17_2_1_1628375697042_148 .summary-item {
  position:relative;
  overflow:visible;
}

#yui_3_17_2_1_1628375697042_148 .summary-item:hover:before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:block;
  opacity:0.3;
  background-color:black;
  z-index:100;
  transform: scale(1.1)
}

#yui_3_17_2_1_1628375697042_148 .summary-item:hover:after {
  content:'Learn More';
  position:absolute;
  top:10%;
  left:25%;
  width:50%;
  text-align:center;
  display:block;
  color:white;
  padding:5px;
  border:solid 2px white;
  font-weight:bold;
  z-index:101;
}

#yui_3_17_2_1_1628375697042_148 a.summary-title-link:after {
  content:'';
  position:absolute;
  display:block;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:102;
}
Here's what this is doing:

Sets the overflow of your summary item to visible. the summary items don't have padding so to make the overlay look better I'll scale it later on which you can only see if you set it to visible here.

Adding a content block overlay to the summary item. This is set to opacity of 0.3 to make this darker push this number up towards 1. it scales by 10% to add padding. set this to 1 or remove this line to have a tight overlay

Adds learn more "button". it's not really a button. you can't add one with css, you'd have to use javascript for this, but seeing as the whole thing is going to be clickable it probably doesn't matter

takes the summary title (which is a link) and "stretches it" to go on top of the overlay. This makes the whole thing clickable.

This is close I think to what you want. if you want a real button, you'd need to use javascript to add it. But to be honest, I'd really think hard about whether trying to customise this sort of thing away from what sqs wants to do. it does make it a lot harder to maintain in the long run. hover effects don't translate to mobile well, and customising off-the-shelf software too much is pretty much always a bad idea... sacrilege to say so in a forum like this, but just my opinion.

that said, hope the code helps. and at least for educational purposes there's some good css lessons here...

EDIT: you have some cool pictures of planes on your site. worth editing it just to tell you that.

Hello Dave. Thank you very much for the code AND the explanation. I was able to tweek it and make it work for different summary blocks. I had to replace the yui number with the block-yui number, otherwise it kept changing every time I made any update to the page. I was able to find the answer to that little problem right here on this forum. Thank you and thanks to Tuan who also responded and has helped me in the past. I am learning a lot from the generous volunteers who oversee this forum. Thank you all for sharing your talent and wisdom!

August 7, 2021

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

I posted this question in July but have not had a response so I am reposting as a new question in the hope that someone will be able to provide the CSS code I need to create a dark mask and a white "Learn More" button on images when hovered/tapped. The images are inside a summary-block. The code can create this action for a specific summary-block using the ID. I can modify the ID to apply to additional summary-blocks. An example of the summary-block would be the "Expertise" section on this page - https://www.blueridgeresearch.com/home-1. Please see screen shot below to see illustration of what I am looking for. My main question is for the dark mask and Learn More button, but I would also like it if the space below the image where the title and excerpt are pulled in could be a light gray and then turn darker with the hover/tap. For the purpose of this question I have enabled the link on the first image (Noise Models). I truly appreciate the talented volunteers on this forum who have helped me before. I am trying to learn CSS so I don't need to ask for help but this one is beyond me. Thank you in advance to anyone who can help with this question.

August 4, 2021

On 8/1/2021 at 12:23 PM, mikevatech said:

Hello Tuanphan. Thank you so much for looking at this. Yes, the Expertise section but I would also like to do the same thing with the Team section. Same functionality for all the Summary blocks. If you can give me the code for the Expertise summary block I can modify it for the other Summary blocks. Or, perhaps an option that will apply to all the Summary blocks. I'm not sure if that is the way to go. For the purpose of this inquiry I have enabled the link on the first Expertise image (Noise Models) in the Expertise Summary block. I hope this is what you needed. Thank you very much. I appreciate your expertise!

Hello Tuan, I don't want to bother you, as I'm sure you are very busy helping many other people, but I hope you have not forgotten about my question. Is there any additional information you need to help me with this css code? If you give me the code for the Expertise summary block, I can modify it for the other summary blocks. To recap: A dark mask and white "Learn More" button on images when hovered/tapped. Please see screen shot above to see illustration. My main question is for the dark mask and Learn More button, but it would be nice if the space below the image where the title and excerpt are pulled in could be a light gray and then turn darker with the hover/tap. I have enabled the link on the first image in the Expertise Summary block - Noise Models. Thank you again.

August 1, 2021

On 7/29/2021 at 4:16 AM, tuanphan said:

You mean Expertise section? Can you enable read more link first?

Hello Tuanphan. Thank you so much for looking at this. Yes, the Expertise section but I would also like to do the same thing with the Team section. Same functionality for all the Summary blocks. If you can give me the code for the Expertise summary block I can modify it for the other Summary blocks. Or, perhaps an option that will apply to all the Summary blocks. I'm not sure if that is the way to go. For the purpose of this inquiry I have enabled the link on the first Expertise image (Noise Models) in the Expertise Summary block. I hope this is what you needed. Thank you very much. I appreciate your expertise!

July 28, 2021

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

Hello, and thank you in advance for looking at my question. I am looking for CSS code that will create a dark mask and white "Learn More" button on images when hovered/tapped. The images are inside a Summary block. The code can create this action and apply to ALL summary blocks, rather than using a specific id for each one. Please see screen shot below to see illustration. My main question is for the dark mask and Learn More button, but it would be nice if the space below the image where the title and excerpt are pulled in could be a light gray and then turn darker with the hover/tap. I currently have the Summary Block title link disabled.

I am using the Burke template. Here is an example of page that I'm working on. https://www.blueridgeresearch.com/home-1

July 13, 2021

Site URL: https://www.blueridgeresearch.com/ourteam-1

Hello,
I have a Team page with images in a summary block. I would like to have text (Read More...) appear over the images when hovered over. I think the image would need to gray out a little so the text could be seen. Clicking would take the user to the URL in the image setup (currently pointing to Lightbox but that will change to a URL). Would also need to work in mobile view. Hopefully, simple CSS can accomplish this. The page is here - https://www.blueridgeresearch.com/ourteam-1. I truly appreciate it if one of you can help me.
Thank you very much!

June 27, 2021

This worked! So clean and simple. Thank you, Dan!

June 27, 2021

Site URL: https://www.blueridgeresearch.com/micah-downing

When viewed on mobile device, the images on my bio pages are not centered. The left margin (white space) is slightly larger on the left. I have tried everything to make them appear centered (or even left would look better) in the mobile view. Is there some simple CSS code that will center (or move to the left) all images in mobile view? Or, if that isn't possible, code that will center images of specific pages? Here is the URL of one of the bio pages to view - https://www.blueridgeresearch.com/micah-downing.

Here is a screen shot of that page in mobile view.

June 22, 2021

Tuanphan, I think I figured it out. It seems the two columns required a spacer in between them, though I'm not sure why that would matter. I added a spacer between "previous" and "next" and then the code worked with the page id changed for each page. Don't understand why that worked, but it did. Thank you very much for your help with this. Wish I had your brain!

June 22, 2021

Thank you for your response, Tuanphan. I'm sorry, I don't quite understand it. The link you gave me goes to a page that shows how to find the page URL. I don't see the page URL anywhere in the code you gave me. I see only the page ID#. Please see below, your code on the left and the inspect code on the right. I highlighted the page ID# that you used in your code. I found that same number for all the other bio pages. But, only the one you gave me works. I don't understand how to duplicate your code for each bio page. I thought I just changed the page id #. Can you please explain exactly what I change to make it work for each bio page? For example, how would the code read for this page? - https://www.blueridgeresearch.com/josh-mellon

June 21, 2021

Thank you so much Tuanphan. I appreciate your help. The code you gave me worked for that specific page. Great! I have additional team member pages. I took your code and changed the name and div#page number for each one. Only the one you gave me works. The others do not work. Obviously, I am either using the wrong div#page number or something else is wrong. I identified where you got the number for the first page and used that as a guide to get the numbers for the other pages. Can you please look at my code and tell me what I'm doing wrong? The URL to the page you did is - https://michael-james-4flv.squarespace.com/config/pages.

Here is the code I made using yours as a guide:

/* Mobile-Michael James-Previous Next */