Layout issue on my published Readymag portfolio website

General topics
1

Hello Readymag Support Team,

I am contacting you because I am experiencing a major issue with my portfolio website created on Readymag.

My website is finished, but I realized that it was designed based on my own screen size. When I publish it or share the link with other people, the layout changes depending on their screen size. The elements (text, images, blocks) are no longer in the same position at all, and the design becomes messy.

I don’t understand how to make my website responsive so that it looks correct on different screen sizes (laptop, tablet, different resolutions, etc.).

I am French, and it is a bit difficult for me to find the right solution on my own. I would really appreciate your help or guidance on how to fix this issue and make my website display properly on all screens.

Thank you very much for your time and support.

Best regards,

Manon

2

Hi Manon! We already spoke over email, our support team sent you a response.

Just in case will add it here too:

Here is some information about our scaling system so that you can better understand how scaling, zooming, and designing processes correlate.

  • Configuring Scale Layout

First, you will need to enable Scale Layout for your project to adapt to different screen sizes. Once this is done, you will need to specify a maximum value (where scaling will stop). We recommend entering a large value, as this will ensure you account for larger screens as well. For example, if you want to consider 5k displays, it’s better to enter 5000 as the limit value.

  • Understanding Zoom.

    The Readymag editor has its own Zoom, which can be used while designing. The key aspect is resetting it back to default after use, which will help maintain consistency and avoid unnecessary confusion (e.g., creating content too small or too large, or placing elements outside the page limit). You can reset the zoom level using the shortcut Command + Zero (Cmd + 0).

    Additionally, all browsers have their own zoom, which should always be set to 100%; having a different value will interfere with your design and the interface.

    Here’s a quick example you can check to see both zoom types in action.
    Quick hit: you will notice it says ‘XXX% Scale layout when the editor zoom has been reset to default’; the number included can vary based on the size of your display.*

  • Fixed-position

    If you’re using fixed-position widgets, the logic is that their position is recalculated based on the screen size. Therefore, if you adjust the editor zoom and position the widget when switching to the Preview or Publish version with the normal screen scale or a larger screen, the widget will calculate and position itself according to the distance where it was originally placed.

    I’ll show you an example of this logic in this short video.
    After considering these recommendations, please adjust the layout so it remains visually balanced across screens, and please let us know if you have any other questions.

Hope this helps! If you have more questions, please reach out to our support team directly at support@readymag.com :orange_heart: