Jump to content

Background shadow on pictures

Recommended Posts

  • Replies 18
  • Views 1.3k
  • Created
  • Last Reply
25 minutes ago, golovemd said:

Site URL: http://www.extremeelectronics.net

I have a shadow background on the images on my site, and all of a sudden, they are no longer working on my portfolio page (Our Work section of our site).  I just added a video to one of the projects and noticed that all of the shadows are now gone.  I don't know if the video had anything to do with it.  Wondering if anyone can help me fix this issue.

I still your box shadow here, what the issue

image.thumb.png.3c286c2ff69a6116259bbfff8f312a50.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 4/16/2021 at 5:35 PM, golovemd said:

Hi tuanphan, no I have not.  I am not sure what needs to be done to correct it.

Add to Design > Custom CSS

/* Portfolio shadow */
a.grid-item {
    box-shadow: 10px 10px 20px #000;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 4/19/2021 at 4:06 AM, tuanphan said:

Add to Design > Custom CSS


/* Portfolio shadow */
a.grid-item {
    box-shadow: 10px 10px 20px #000;
}

 

Thank you so much.  I have another question.  The shadow is working on a couple of the portfolio entries when you select them, but the rest do not have the shadow.  I am not sure why just those two entries have the drop shadow.  Is there a way to add more code to have them all have the shadow?

Link to comment
On 4/22/2021 at 6:20 PM, golovemd said:

Thank you so much.  I have another question.  The shadow is working on a couple of the portfolio entries when you select them, but the rest do not have the shadow.  I am not sure why just those two entries have the drop shadow.  Is there a way to add more code to have them all have the shadow?

I see all have shadows here?

image.thumb.png.3d667b2887dbb11a9442990e47122a3d.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
14 hours ago, golovemd said:

That is the "Our Work" main portfolio page.  If you go into the individual jobs, two or three of them have the drop shadows, and the rest do not, like this one

Screen Shot 2021-04-24 at 7.52.52 AM.png

Add this code

/* Gallery masonry shadow */
figure.gallery-masonry-item {
    box-shadow: 10px 10px 20px #000;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
18 hours ago, tuanphan said:

Add this code


/* Gallery masonry shadow */
figure.gallery-masonry-item {
    box-shadow: 10px 10px 20px #000;
}

 

Perfect. Thank you so much.  Can I send you a donation for all your help?  My site would not be what it is without your continuous help

Link to comment
17 hours ago, golovemd said:

Perfect. Thank you so much.  Can I send you a donation for all your help?  My site would not be what it is without your continuous help

Helping on forum is free..

I see the site have some other problems. Do you want to fix these?

Site URL: http://www.extremeelectronics.net/

1. (SSL) You haven’t installed SSL so the browser address bar says “Not secure”

extremeelectronics.net-01-min.png

 

2. (Smaller screen-Header) Want to make all navigation items on same line?

extremeelectronics.net-02-min.png

3. (Mobile-Networks) Make this button text same line?

extremeelectronics.net-03-min.png

4. (Tablet-Blog) Make this banner image fullsize?

extremeelectronics.net-04-min.png

5. (Mobile-Blog posts) Text overlap

extremeelectronics.net-05-min.png

6. (Tablet-Blog posts) Increase blog text width?

extremeelectronics.net-06-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
8 hours ago, tuanphan said:

Helping on forum is free..

I see the site have some other problems. Do you want to fix these?

Site URL: http://www.extremeelectronics.net/

1. (SSL) You haven’t installed SSL so the browser address bar says “Not secure”

extremeelectronics.net-01-min.png

 

2. (Smaller screen-Header) Want to make all navigation items on same line?

extremeelectronics.net-02-min.png

3. (Mobile-Networks) Make this button text same line?

extremeelectronics.net-03-min.png

4. (Tablet-Blog) Make this banner image fullsize?

extremeelectronics.net-04-min.png

5. (Mobile-Blog posts) Text overlap

extremeelectronics.net-05-min.png

6. (Tablet-Blog posts) Increase blog text width?

extremeelectronics.net-06-min.png

I'd love to fix all the issues.  To be honest, I wasn't aware them.  I did not test the site with a tablet, so I did not notice that.  I did not have the issue with the text overlap in the blog before but see that I do now.  I guess I must have changed something along the way that messed it up.  

Link to comment
On 4/27/2021 at 6:34 AM, golovemd said:

I'd love to fix all the issues.  To be honest, I wasn't aware them.  I did not test the site with a tablet, so I did not notice that.  I did not have the issue with the text overlap in the blog before but see that I do now.  I guess I must have changed something along the way that messed it up.  

Q2. Add to Design > Custom CSS

/* nav one line */
.header-layout-nav-right .header-nav-list {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}
.header-layout-nav-right .header-nav-list * {
    font-size: 1.2rem;
}

Q3. 

/* Mobile */
@media screen and (max-width:767px) {
/* networks button */
div#block-2497c7da13d7f3fc5318 a {
    padding-left: 30px;
    padding-right: 30px;
}
}

Q5. In Blog Page Header or Code Injection Header or Code Injection Footer, find this code

@media screen and (max-width:767px) {
  #page section:first-child {
    min-height: unset;
    height: 30vh;
    margin-top: 5vh;
}
  }

change it to

@media screen and (max-width:767px) {
  body:not(.collection-type-blog-single-column) #page section:first-child {
    min-height: unset;
    height: 30vh;
    margin-top: 5vh;
}
  }

Q6. 

/* tablet blog content width */
@media screen and (max-width:991px) and (min-width:768px) {
.blog-item-inner-wrapper {
    width: 90% !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Wow, thanks so much once again.  I didn't even notice the issues you found, so it is greatly appreciated that you took the time to review everything.  I am not sure if this changed just now when I added/changed the code you just outlined, but I noticed on my phone, on the blog page the header image is again not showing the full image.  I think you helped me with this in the past as it was displaying properly at one point 

Screenshot_20210430-194314_Chrome.png

Link to comment
8 hours ago, golovemd said:

Wow, thanks so much once again.  I didn't even notice the issues you found, so it is greatly appreciated that you took the time to review everything.  I am not sure if this changed just now when I added/changed the code you just outlined, but I noticed on my phone, on the blog page the header image is again not showing the full image.  I think you helped me with this in the past as it was displaying properly at one point 

Screenshot_20210430-194314_Chrome.png

I think I help with blog posts, above is blog page

Add to Design > Custom CSS

/* resize blog page banner image */
@media screen and (max-width:767px) {
body.collection-type-blog-single-column article section:first-child {
    min-height: unset !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/1/2021 at 7:50 PM, golovemd said:

Thanks again.  I am not sure what I did as I did not remove code.  I just added the above code though and it works great.  I greatly appreciate all of your help

You're welcome. If you have any other problems, just reply here.

Have a great day.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.