SVG hidden below 1440 px width

[Stanczyk]

Hello

We used the horizontal lines in the svg and scaled them. The whole thing forms a grid, unfortunately below a width of 1440 pixels the horizontal lines disappear.

Does anyone know the solution?

The client is getting impatient.

Link: http://archiwum.blobtech.pl/

Thanks
Karol

[arminunruh]

hey karol!

better if you put that svg
in lay options → custom css & html

into html at bottom

and then style it via css

or better yet,
just put divs in there and style them via css

like

html

<div class="hey1"></div>
<div class="hey2"></div>
<div class="hey3"></div>

css

.hey1{
width: 20vw;
height: 20vh;
border: 1px solid white;
position: absolute;
left: 10vw;
top: 20vh;
pointer-events: none;
}

and then more styles for .hey2 and .hey3

cause your svg has 1px widths but the image width is based on percent width, that 1px border will be smushed to 0.5px and less causing it to disappear

however, with css 1 px lines, they always stay 1px wide

[Stanczyk]

Hello Amin

Thank you for your reply, but all the lines are below 1 px.
Instead of scaling I placed the full width svg. It displays correctly.

I have another problem, unfortunately I don't know how the different elements load, because exceptionally in the subpage "contact" - text elements, the moment they load they jump from the bottom edge to the desired location.

Perhaps you would have a solution for this?

Link: http://archiwum.blobtech.pl/kontakt/

It's like ajax not working when loading this page.

Kind regards
Karol

[arminunruh]

maybe it is because of your custom css:

but all the lines are below 1 px.
Instead of scaling I placed the full width svg. It displays correctly.

well that is even worse because the lines will disappear once their width is rounded to less than half a pixel i guess

and the widths of the lines are dependent on the widths of the browser because the lines are inside a svg image and that image is 100% width of the browser

[Stanczyk]

@arminunruh

Unfortunately, this is not the problem.

I've noticed that the problem only occurs when google maps are added to the page.

The maps cause the ajax to be disabled.
As a result, the text bouncing when loading.

Do you perhaps know of a solution to keep the ajax functionality on this page?

[Stanczyk]

@arminunruh
Do you have any idea why footer isn't responsive as main layout?

I have different background image for offers pages. It had that same resolution like on main background image, but seems different.

It's visable on different resolutions like 18:9 (matebook) and macbook pro 2021 (3024 x 1964 px)

http://archiwum.blobtech.pl/serwis-hydrauliki-silowej/

[arminunruh]

hey there!

so that one element is jumping because elements that element is aligned to 1/3rd or 2/3rds vertically in a row.
elements that are aligned like that get positioned using javascript so they jump around.

the website is rlly nice!

footer:
i cant seem to see any issue. can you explain the footer issue in more detail?
i think i dont understand what you mean

[Stanczyk]

@arminunruh
I couldn't drop the mp4 file here,
so I uploaded it to our www

Link:
https://www.yos-studio.com/wp-content/uploads/2022/11/blobtech-mp4-resolution.mp4

The problem occurs in cases where the resolution / aspect ratio of the screen is different from the standard (16in wide).
For example, 18:9

Thanks!

[arminunruh]

so i watched the video and everything looks correct in the video

i dont see the problem

i think i dont understand the issue

[Stanczyk]

@arminunruh

The next video on 16:10 aspect ratio
https://www.yos-studio.com/wp-content/uploads/2022/11/blobtech-16x10-resolution.mp4

On 18:9 aspect ratio
https://www.yos-studio.com/wp-content/uploads/2022/11/blobtech-mp4-resolution.mp4

• photos do not fit in lines on offer pages
• the lines from the footer are closer to the centre than they should be

[arminunruh]

thanks finally i understand what you mean!

well your svg i think has css like

height: 100vh;
width: auto

so the svg position always changes based on the height of the browser

however, lay theme layouts are based on widths not heights.
so of course they wont align with your svg. they would only align with your svg if the aspect ratio of the browser is the same as the aspect ratio of the svg, which is probably the case for 16:9

the solution is you need to use different css for your svg. it needs to have its width set and its height in auto

sth like

width: 100%;
height: auto

[Stanczyk]

@arminunruh

Hey Armin

I didn't use any css to change width/height.
Just used element grid and streched to 100% width.

Should I use another option?

Tried to change svg with css to
width: 100%;
height: auto

but nothing changed
https://blobtech.pl/modernizacje/

[arminunruh]

ok you set the svg as a background image of your body

i think that wont work properly. the svg size always needs to be width: 100% and height: auto and i guess that wont work when setting the svg as a background image

you need to insert the svg into lay options → custom css #& html → custom html at bottom

then style the svg to be
width: 100%; height: auto;

but as i said much earlier:
i think you need to insert html divs into lay options → custom css #& html → custom html at bottom

then use css to make these divs 1 px wide, and use position fixed to place these divs correctly

i think you should have just tried doing that instead of doing it your way

because the way you did it, the svg width is percentage based, your 1px lines in your svgs will change their widths because they are contained in the svg and the width of the svg depends on the width of the browser

please next time try the thing i suggest :D sry for the rant