Page 1 of 1
Complicated combined graphics, svg, img text
Posted: Mon Apr 08, 2024 9:34 pm
by karkojk
Hi
I am trying a way to make this responsive.
The bubbles are supposed to be then as they will change over time as links.
I've tried "section", flexbox, classic, but it's still not right and I can't decide which way to do it. Make different layers and display those according to width/breakpoint.
I guess I can't change the text in the section, but I still have some buts . . .
If you have a tip please, what tool/method would you use to solve this.
Jirka
https://ln5.sync.com/dl/33d7dd3b0/kut3s ... 9-bcchfhyi
Re: Complicated combined graphics, svg, img text
Posted: Tue Apr 09, 2024 12:03 am
by crispy68
Your pic in the forum is not working but I downloaded your demo. Based on the image and project, to have that kind of overlapping you will need to use a section. You mentioned you tried it with a section. What is the issue exactly?
Re: Complicated combined graphics, svg, img text
Posted: Tue Apr 09, 2024 10:33 am
by karkojk
Hi,
I put the image from another source, I didn't find the option to directly insert the image, the ones attached this way "disappear" over time. How do you recommend it here?
Here I'm after recommendations on how to do similar graphics, there are new options I don't know, so I'm trying to use them.
What number of "breakpoints" to choose to accommodate this.
The first way I feel is spacing is "fixed" by breakpoint, and in section it varies by size between two breakpoints.
That's floating, I'll try to play around with that, as long as it's the right way.
I bought WYSIWYG Web Builder because I'm looking for a tool that will have "cleaner code", so I don't want to complicate it with bad practices.
What do you use and have you testedto verify the view in the device?
Thank you for your time
Jirk
Re: Complicated combined graphics, svg, img text
Posted: Tue Apr 09, 2024 11:24 am
by Pablo
If you use a section then you can either scale the items or align them to a fixed edge.
You can also add breakpoints to adjust the layout for different screen sizes.
A section uses 'fixed layout', because otherwise you cannot overlap items.
Re: Complicated combined graphics, svg, img text
Posted: Tue Apr 09, 2024 4:43 pm
by wwonderfull
Yes I think section would be the perfect and easy tool for doing that but will need some break point adjustments. When scaling the page I saw some overflow issues on the breakpoints maybe something sticking out.
But if you can use the skills enough you can do the same thing purely using layout grids also. You can see a demonstration here. Custom designs may need more adjustments depending on the accuracy of the design. Possibility is limited to our ability.
https://gifyu.com/image/SZbLF
Re: Complicated combined graphics, svg, img text
Posted: Tue Apr 09, 2024 7:07 pm
by karkojk
Hey, guys,
thanks for the tips, encouragement, I'm trying, I think I can make it through the section
https://app.screencast.com/n57R1M76bfMgW