Highlighted

Help required

Explorer ,
Nov 04, 2017

Copy link to clipboard

Copied

Hi all

I am currently designing a website for a mate but I have got an issue with the preview I am being given. I have currently only created the master page as this is my primary issue. I have lined everything up in all the breakpoints but when I look at it in the browser everything is offset to the right by about 100 PX. I don’t have a clue how to resolve this as I have checked all the page properties but there is nothing obvious to change.

Previous to this I designed another website without any bother so was wondering if this is down to the recent update by Adobe

I have been told I need to create a dropbox link to the project file which I have done below.

Dropbox - website

any help would be gratefully appreciated.

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

Your pinning was just a little weird. You have to decide wether to pin it to browser (6 point pinning) or to a container (three point pinning).

You could delete a lot breakpoints at your master, this reduces the file size tremendous.

In this link you find your file changed as I understand your setup. Feel free to change whatever you need to change.

Adobe Creative Cloud

Pinning in 2018 is used a little different as in the previous versions, it must be used less.

In your case with the "pinned to top" header I pinned everything inside the header the same way – to the top center, so it stays and doesn´t move around.

You may realize in  smaller breakpoints, that I decided to scale the header in height. You could, btw, easily see the approach

if you use this grey scrubber on the right hand side at the breakpoint bar and watch if everything behaves as intended.

You also may realize that I didn´t change all breakpoints, as I think you have to do some decisions in smaller breakpoints.

Best Regards,

Uwe

Views

141

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Help required

Explorer ,
Nov 04, 2017

Copy link to clipboard

Copied

Hi all

I am currently designing a website for a mate but I have got an issue with the preview I am being given. I have currently only created the master page as this is my primary issue. I have lined everything up in all the breakpoints but when I look at it in the browser everything is offset to the right by about 100 PX. I don’t have a clue how to resolve this as I have checked all the page properties but there is nothing obvious to change.

Previous to this I designed another website without any bother so was wondering if this is down to the recent update by Adobe

I have been told I need to create a dropbox link to the project file which I have done below.

Dropbox - website

any help would be gratefully appreciated.

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

Your pinning was just a little weird. You have to decide wether to pin it to browser (6 point pinning) or to a container (three point pinning).

You could delete a lot breakpoints at your master, this reduces the file size tremendous.

In this link you find your file changed as I understand your setup. Feel free to change whatever you need to change.

Adobe Creative Cloud

Pinning in 2018 is used a little different as in the previous versions, it must be used less.

In your case with the "pinned to top" header I pinned everything inside the header the same way – to the top center, so it stays and doesn´t move around.

You may realize in  smaller breakpoints, that I decided to scale the header in height. You could, btw, easily see the approach

if you use this grey scrubber on the right hand side at the breakpoint bar and watch if everything behaves as intended.

You also may realize that I didn´t change all breakpoints, as I think you have to do some decisions in smaller breakpoints.

Best Regards,

Uwe

Views

142

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 04, 2017 0
Adobe Community Professional ,
Nov 04, 2017

Copy link to clipboard

Copied

Your pinning was just a little weird. You have to decide wether to pin it to browser (6 point pinning) or to a container (three point pinning).

You could delete a lot breakpoints at your master, this reduces the file size tremendous.

In this link you find your file changed as I understand your setup. Feel free to change whatever you need to change.

Adobe Creative Cloud

Pinning in 2018 is used a little different as in the previous versions, it must be used less.

In your case with the "pinned to top" header I pinned everything inside the header the same way – to the top center, so it stays and doesn´t move around.

You may realize in  smaller breakpoints, that I decided to scale the header in height. You could, btw, easily see the approach

if you use this grey scrubber on the right hand side at the breakpoint bar and watch if everything behaves as intended.

You also may realize that I didn´t change all breakpoints, as I think you have to do some decisions in smaller breakpoints.

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 04, 2017 0
Explorer ,
Nov 05, 2017

Copy link to clipboard

Copied

Thanks very much for the help with this. Really appreciated!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 05, 2017 0
Explorer ,
Nov 05, 2017

Copy link to clipboard

Copied

Sorry I'm still really confused by the new pinning method. I can't see how you can have a 1920 pixel and the next one at 970 and still use that one break point. It just doesn't work in my opinion. Surely you have to do have a breakpoint at every single point along where you can reassign the positions of components and resize fonts. This is why I had so many breakpoints.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 05, 2017 0
Adobe Community Professional ,
Nov 05, 2017

Copy link to clipboard

Copied

But as you see in my file, there was no realigning necessary on your master page.

I just centered all elements in your header until the 960. So it keeps its position.

Bildschirmfoto 2017-11-05 um 17.19.46.png

If you use the scrubber, you see that it works as intended from my side.

Be aware, that breakpoints on master and their respective pages do not have to be the same.

In your case, because you did not use a menu so far you do not need that much breakpoints on master.

Because the file size increases very much with each breakpoint, I would need as little breakpoints as possible.

If you need some more support, let me know. Change your file, add some elements and we keep on.

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 05, 2017 0