Jump to content

mikevatech

Member
  • Posts

    39
  • Joined

  • Last visited

Everything posted by mikevatech

  1. 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?
  2. 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.
  3. 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.
  4. 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
  5. 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
  6. 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; } }
  7. Tuan, The URL to the page is https://www.blueridgeresearch.com/nepa-ea-eis. Thank you for looking at this.
  8. Tuan, The URL to the page is https://www.blueridgeresearch.com/nepa-ea-eis. Thank you for looking at this.
  9. 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; } }
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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!
  15. 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.
  16. 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.
  17. 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!
  18. 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
  19. 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!
  20. This worked! So clean and simple. Thank you, Dan!
  21. 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.
  22. 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!
  23. 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
  24. 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 */ @media screen and (max-width:640px) { div#page-60a40ec20f22b814725502e4 .span-2 { width: 50% !important; float: left !important; } } /* Mobile-Josh Mellon-Previous Next */ @media screen and (max-width:640px) { div#page-60c3b8448cc84246d83a97c8 .span-2 { width: 50% !important; float: left !important; } } /* Mobile-Alex Salton-Previous Next */ @media screen and (max-width:640px) { div#page-60c9116f3ed8ad122ceaa45c .span-2 { width: 50% !important; float: left !important; } } /* Mobile-Matt Calton-Previous Next */ @media screen and (max-width:640px) { div#page-60c91354f97c884a95e4ac06 .span-2 { width: 50% !important; float: left !important; } } /* Mobile-Ben Manning-Previous Next */ @media screen and (max-width:640px) { div#page-60c914d2eebe08096e929d71 .span-2 { width: 50% !important; float: left !important; } } /* Mobile-Shane Limpany-Previous Next */ @media screen and (max-width:640px) { div#page-60c9363db4128246fba23851 .span-2 { width: 50% !important; float: left !important; } } /* Mobile-Shane Limpany-Previous Next */ @media screen and (max-width:640px) { div#page-60c9363db4128246fba23851 .span-2 { width: 50% !important; float: left !important; } } /* Mobile-Jonathan Gills-Previous Next */ @media screen and (max-width:640px) { div#page-60c938d345d4ac6a9c48f52c .span-2 { width: 50% !important; float: left !important; } } /* Mobile-Blaine Harker-Previous Next */ @media screen and (max-width:640px) { div#page-60c93aa854473e6b91af3f18 .span-2 { width: 50% !important; float: left !important; } }
  25. Site URL: https://www.blueridgeresearch.com For the life of me, I can't find the edit pencil in my Burke, 7.1 Squarespace template. I can click the plus sign and add content blocks, etc., but I can't find the edit pencil. I googled it and looked on Squarespace help still don't see it. What am I missing? Can anyone out there help me? My site is www.blueridgeresearch.com Thanks very much for any help/hints.
×
×
  • 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.