Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: SVG image disappears depending on the browser width

SVG image disappears depending on the browser width [SOLVED for now] 10 May 2021 09:52 #60702

I have something weird again ...
A blog layout with two columns divided by 60% / 40%. There is text in the left column and an SVG image in the right column.
If I now scale the browser window, the SVG disappears between 800 and 1024 pixels wide, but it is not due to the responsive settings. If I insert a JPG instead (or additionally), everything works as expected.
You can see it on the page: westiform.online/en/news

Please Log in or Create an account to join the conversation.

Last edit: by Chrysant.

SVG image disappears depending on the browser width 10 May 2021 10:34 #60703

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 24746
  • Karma: 427
  • Thank you received: 3106
Hi
this is related to the browser behavior, an image has its own dimensions that is used by the browser to render it
an SVG file does not have this information in the same way, so the browser does not allocate any width to it

the fact is that you have selected to stack vertically the columns and at this stage, the flexbox is removed and your problem occurs
I can try to fix it by playing with flexbox

please remind me in few days if I don't come back to you
CEd
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

SVG image disappears depending on the browser width 10 May 2021 12:38 #60704

Hi, yes I understand.
But why does the SVG image scale smoothly above 1024 px because it is also stacked horizontally?

The column spacing of 2% is also ignored between 800 px and 1024 px width. The columns stick directly to each other.
The columns are stacked vertically below 800 px ... then it doesn't matter.

I look forward to your answer.

Please Log in or Create an account to join the conversation.

SVG image disappears depending on the browser width 10 May 2021 12:51 #60705

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 24746
  • Karma: 427
  • Thank you received: 3106
the difference is that
- horizontally aligned using flexbox
- vertically aligned, without flexbox (native behavior)
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

SVG image disappears depending on the browser width 27 May 2021 07:41 #60850

Hi Ced,

this is a friendly reminder on this post. Thx

Please Log in or Create an account to join the conversation.

SVG image disappears depending on the browser width 27 May 2021 16:14 #60863

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 24746
  • Karma: 427
  • Thank you received: 3106
I'm checking by my side and I'm not able to reproduce the issue with a svg image
it seems that there is something in your settings that is different and that causes this

can you please export the page and send me the .PBCK file ? so that I can import it and check with it
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

SVG image disappears depending on the browser width 31 May 2021 14:56 #60920

I gave the SVG image a width, now it is displayed.

Between 800 and 1024 pixels (browser width) each column still has a different width, even though this is a blog ...


Above 1024 pixels (and below 800) all images/ columns aligned well:


My settings for responsive resolution:


Also the gap of 2% between the colums are not respected.

westiform.online/news


PBCK-File:

File Attachment:

File Name: PAGEBUILDE...31-3.zip
File Size:1 KB

Please Log in or Create an account to join the conversation.

SVG image disappears depending on the browser width 31 May 2021 15:01 #60921

Additional Info:
First Image is SVG set to a width 1600 px
Second and third image (JPG) are both 1600 x 900 pixels

Please Log in or Create an account to join the conversation.

Last edit: by Chrysant.

SVG image disappears depending on the browser width 31 May 2021 17:50 #60924

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 24746
  • Karma: 427
  • Thank you received: 3106

even though this is a blog

ok I missed that point, this is problably why I did not manage to reproduce it

thanks for the details, I will let you know
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

SVG image disappears depending on the browser width 03 Jun 2021 18:56 #60936

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 24746
  • Karma: 427
  • Thank you received: 3106
I have tried many settings, I'm not able to reproduce the issue ...
the only solution that I can give you for now is to override this using CSS like this :
@media only screen and (max-width:1024px) and (min-width:801px){

#row_ID1597670617421 > .inner { display: block; }
}
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
  • 2
Time to create page: 0.291 seconds

Fast and powerful creation, customizable and responsive.

Read More

Qui est en ligne

We have 508 guests and 2 members online