Background shadow on pictures

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.

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

Thanks for the response.  Like I said in my post, they are not working on my portfolio page, labeled Our Work on the site.  They no longer show in that section.  They are still showing where they were on the rest of the site.

Does anyone have any idea on why the shadows are no longer showing in my portfolio page and how to restore them?

On 4/11/2021 at 6:42 AM, golovemd said:

Does anyone have any idea on why the shadows are no longer showing in my portfolio page and how to restore them?

Hi. Have you solved it yet?

On 4/15/2021 at 2:41 AM, tuanphan said:

Hi. Have you solved it yet?

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

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;
}

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?

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?

37 minutes ago, tuanphan said:

I see all have shadows here?

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

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

Add this code

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

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

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”

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

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

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

5. (Mobile-Blog posts) Text overlap

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

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”

 

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

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

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

5. (Mobile-Blog posts) Text overlap

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

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.  

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;
}
}

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 

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 

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;
}
}

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

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.