How to Make a Landing Page Responsive?

How do I?
1

Hello Five Support Team,

I made a landing page that consists only of one image. Please tell me how to make the landing page responsive.

Currently, when the application window is not in full-screen mode, the image only partially appears (see screenshot attached).

Landing Page Image Auto Repositioning Issue - Screenshot 2024-09-19 173228
Landing Page Image Auto Repositioning Issue - Screenshot 2024-09-19 1732281178Ă—785 140 KB

When the application is in full-screen mode, some small vertical scroll appears, even though the image is fully visible. (see screenshot attached).

Landing Page Image Auto repositioning Issue - Screenshot 2024-09-19 174333
Landing Page Image Auto repositioning Issue - Screenshot 2024-09-19 1743331916Ă—1148 206 KB

Thank you,

Vlad

2

Hi Vlad,

To make a page responsive, you need to use grid layouts and media queries to change the look on different viewports.

A simple example based on the image you have shown is to create a div around the image. e.g.

<div class="image-container">
    <img src="path/to/your/image.jpg" alt="Description">
</div>

then add some CSS.

.image-container {
     max-width: 500px;  
     margin: auto;      
}
.image-container img {
     width: 100%;       
     height: auto; 
}

This will make the image be always at 100% width of the container regardless of browser width but maxes out at 500 pixels.

As for your latter issue, please make sure that there are no unnecessary codes underneath the image that takes up spaces. Hope this helps.

Regards,
Haru

3

Hello Haru,

Thank you for the instructions. Please clarify, where exactly do I add the CSS code that you wrote?

I would attach the .rtf file with my landing page code, but the system doesn’t allow me to do so.

Thank you.

Vlad

4

If you click on the code symbol on the top left of the text editor, this will allow you to remove or add your own code for the landing page.
Hope this helps.

Regards,
Haru

Screenshot (8)
Screenshot (8)1824Ă—1138 194 KB

5

Haru,

Let me rephrase my question:

Here is my code below:

My picture code - Screenshot 2024-09-22 223708
My picture code - Screenshot 2024-09-22 2237081168Ă—238 31.5 KB

I would like to know where exactly in my code I should put the code that you provided.

Thank you.

Vlad

6

Hi Vlad,

Just replace your code with the following

<style>
   .image-container {
     max-width: 600px;  
     margin: auto;      
}
.image-container img {
     width: 100%;       
     height: auto; 
}
</style>

<div class="image-container">
    <img src="http://dummy-images.com/abstract/dummy-480x270-Rope.jpg" alt="Description">
</div>

You will have to change the link of the dummy image with your own one.

Hope this helps.

Regards,
Haru

1 Like
7

Hello Haru,

Thank you very much for the guidance! It works!

Regards,

Vlad