Page layout changes when changing size browserwindow

Question
1

Hi All,

I just finished the design of a new website. (my first with Sparkle)
This looks as wished for with the preview function in Sparkle.
However when published, when I move the size of the browser window (making it smaller) the complete layout changes.

Is there a way to fix all content so when altering the browserwindow (Safari) everything stays in place?

Hopefully anyone can help out.
Thank you for your time!

Philip

2

If you have used multiple device layouts, then this is normal behaviour when resizing the browser window etc.

What device layouts have you used i.e 960, 768 etc?

Take a look at one of my websites, I have used many device sizes etc, and when you resize the browser, the layout changes to match the layout of each device size I have created in Sparkle etc.

https://www.musicchamber.co.uk

Best,
Scott

3

Hi Scott,

Thank you for your answer.
And yes, when I resize your website It changes in a nice way.
In my website, all text goes over each other and some completely disappears:

http://tinekedewaard.nl

I have only used 1200 pixel layout.

Best,
Philip

4

Hi,

Yes, you have problems. How did you get the text into Sparkle, did you type directly into Sparkle etc?

It’s also not a good idea to use ‘system fonts’ either.

When copying and pasting text from another application, the formatting of the text needs to be stripped out. If you use the ‘paste and match style’ in the edit menu, then this as far as I know would strip out any formatting of the text from Microsoft word or whatever app you copied the text from.

@duncan is the best bet to help with this!

Best,
Scott

5

Hi Scott,

I created the website in Dreamweaver a year ago.
Since I stopped with Adobe I copy paste all text from the dreamweaver file into the separate textboxes in Sparkle. So no, I did not type it directly.

You think the copy pasting did not went totally okay?

6

Yes I think this is the issue. You need to do as suggested in my other reply, because the formatting needs to be stripped out etc.

Best,
Scott

7

If you make use of text styles in Sparkle, this is the best approach.

So use body style for paragraph text, Header or sub-header for headings etc.

Hope this info helps.

Best,
Scott

8

Thank you Scott, I wil go and check if your suggestion does the job.
Will let you know!
Philip

9

Hi Scott,

It works!
It was not the copy paste problem but I just did not understand the different screen width options…!

Thanks anyway!
Philip

10

Great, glad you got it sorted :slight_smile:

Best,
Scott