Pictures appearing in editing but not live on site

Site URL: http://kdigitalstudio.com

Hey!

I have images blocks on my website to represent resources about what I use for my business. They appear in the backend of the site when I am editing as expected, but do not appear on the live version of the site. This is the only page where I am encountering the issue and can't figure out what's going wrong. It appears the images on the page that has this issue is random.

What should I do?

On 9/3/2021 at 2:50 AM, kds_on_ss said:

Site URL: http://kdigitalstudio.com

Hey!

I have images blocks on my website to represent resources about what I use for my business. They appear in the backend of the site when I am editing as expected, but do not appear on the live version of the site. This is the only page where I am encountering the issue and can't figure out what's going wrong. It appears the images on the page that has this issue is random.

What should I do?

Hi,

Which image? Can you take a screenshot?

Same issue for me. Images appear when I click edit. But not on the site. Here is a screenshot of the web page (no image appears) and below is the editing page (image appears)

I tried changing the images and selected a couple of stock images but that hasn't made a difference.

On 10/22/2021 at 7:47 PM, RiseNE said:

Same issue for me. Images appear when I click edit. But not on the site. Here is a screenshot of the web page (no image appears) and below is the editing page (image appears)

I tried changing the images and selected a couple of stock images but that hasn't made a difference.

Can you share link to page in screenshot? We can check easier

On 10/27/2021 at 10:02 AM, tuanphan said:

Can you share link to page in screenshot? We can check easier

Hi, this is the page: https://www.wearerise.co.uk/

11 hours ago, RiseNE said:

Hi, this is the page: https://www.wearerise.co.uk/

a CSS caused this. Add this to Design  >Custom CSS to override it

body:not(.sqs-edit-mode-active) .sqs-block-image .design-layout-card:not(.sqs-narrow-width)>div:first-child>div:first-child img {
    position: static !important;
}

12 hours ago, tuanphan said:

a CSS caused this. Add this to Design  >Custom CSS to override it

body:not(.sqs-edit-mode-active) .sqs-block-image .design-layout-card:not(.sqs-narrow-width)>div:first-child>div:first-child img {
    position: static !important;
}

 

Thank you for the advice. I'm not very technical so apologies for the questions. There is already a lot of code in the Custom CSS box, do I just add the bit you have suggested at the start, end or somewhere else?

Thanks

On 11/4/2021 at 10:39 PM, RiseNE said:

Thank you for the advice. I'm not very technical so apologies for the questions. There is already a lot of code in the Custom CSS box, do I just add the bit you have suggested at the start, end or somewhere else?

Thanks

add to last line in Custom CSS (backup CSS before edit anything)

On 11/7/2021 at 8:32 AM, tuanphan said:

add to last line in Custom CSS (backup CSS before edit anything)

Thanks for your help. The images are now showing up! But the surrounding background box is not sizing automatically to fit the image size - do i need to resize the images? As before, they look ok in Edit mode, but not on the published website.

https://www.wearerise.co.uk/

On 11/15/2021 at 10:49 AM, RiseNE said:

Thanks for your help. The images are now showing up! But the surrounding background box is not sizing automatically to fit the image size - do i need to resize the images?

https://www.wearerise.co.uk/

14 hours ago, RiseNE said:

 

Keep above code & add this code

.image-block .intrinsic {
    -webkit-box-shadow: unset !important;
            box-shadow: unset !important;
}
.image-block .content-fit {
    -webkit-box-shadow: 0px 3px 15px rgb(100 100 100 / 49%);
    -moz-box-shadow: 0px 3px 15px rgba(100,100,100,.49);
    box-shadow: 0px 3px 15px rgb(100 100 100 / 49%);
    display: block;
}

Thank you @tuanphan  for your help so far. I've added the code and it has fixed the problem of the image sizes, but it is has removed the shadow around images and is giving me this error message: 

error evaluating function `rgb`: color functions take numbers as parameters

And it has changed how our logo appears at the top left of each page. On dark pages, it should appear as a white logo and on light pages it should appear as a black logo, but it is black on all pages now so it is hard to see on our home page and impossible to see on pages with a black background. 

home page: https://www.wearerise.co.uk/

other page where logo should be white: https://www.wearerise.co.uk/adult-health-and-wellbeing

It has also changed the sub menu but I'm not too concerned about that.

Thank you again for your ongoing help

22 hours ago, RiseNE said:

Thank you @tuanphan  for your help so far. I've added the code and it has fixed the problem of the image sizes, but it is has removed the shadow around images and is giving me this error message: 

error evaluating function `rgb`: color functions take numbers as parameters

And it has changed how our logo appears at the top left of each page. On dark pages, it should appear as a white logo and on light pages it should appear as a black logo, but it is black on all pages now so it is hard to see on our home page and impossible to see on pages with a black background. 

home page: https://www.wearerise.co.uk/

other page where logo should be white: https://www.wearerise.co.uk/adult-health-and-wellbeing

It has also changed the sub menu but I'm not too concerned about that.

Thank you again for your ongoing help

ah, the code has some invalid syntax, use this new code

.image-block .intrinsic {
    -webkit-box-shadow: unset !important;
            box-shadow: unset !important;
}
.image-block .content-fit {
    -webkit-box-shadow: 0px 3px 15px rgb(100,100,100,.49);
    -moz-box-shadow: 0px 3px 15px rgba(100,100,100,.49);
    box-shadow: 0px 3px 15px rgb(100,100,100,.49);
    display: block;
}

Perfect @tuanphan thanks again for all your help! 🏆