Complicated combined graphics, svg, img text

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
karkojk
 
 
Posts: 27
Joined: Tue May 23, 2023 5:52 pm

Complicated combined graphics, svg, img text

Post 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

Image
https://ln5.sync.com/dl/33d7dd3b0/kut3s ... 9-bcchfhyi
Last edited by karkojk on Tue Apr 09, 2024 8:28 am, edited 1 time in total.
User avatar
crispy68
 
 
Posts: 2912
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Complicated combined graphics, svg, img text

Post 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?
karkojk
 
 
Posts: 27
Joined: Tue May 23, 2023 5:52 pm

Re: Complicated combined graphics, svg, img text

Post 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
Last edited by karkojk on Sun Apr 21, 2024 4:05 pm, edited 1 time in total.
User avatar
Pablo
 
Posts: 22472
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Complicated combined graphics, svg, img text

Post 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.
wwonderfull
 
 
Posts: 1439
Joined: Fri Aug 21, 2020 8:27 am
Contact:

Re: Complicated combined graphics, svg, img text

Post 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
karkojk
 
 
Posts: 27
Joined: Tue May 23, 2023 5:52 pm

Re: Complicated combined graphics, svg, img text

Post 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
Post Reply