site: erfanfarahani.com

pass: weberfan12

Hello, everyone. I faced a problem while finishing my portfolio website. The first section image on my laptop is full size, but on bigger screens, it's smaller than the entire screen. Is there any code that I can use to make this section responsive so that no matter which screen and browser size, it will fit the entire screen vertically and horizontally? 

Under your site styles, head into accessories -> spacing -> and then set spacing to 3000px width. You can head into your chrome inspector tool to see how this responds to different screen sizes. Let me know if you need any more help!

Thank you @Websleyfor your reply. What your solution did was increasing the maximum width of the page to the maximum value so it will be big in every screen. But it didnt do what i was looking for. Im looking for a css code that makes the banner image responsible to exactly every browser size that opens it. There were some sulutions in here mostly by @tuanphan but It didnt work for my website. Would be awsome if someone casn share some piece of code with me.

I zoomed out my browser and I see the image is filling the width.

Would you like the first section to have full height as well?
If so, you can click edit section and then from the Design tab on Section height click on "L"

@sorca_marian Thanks for your reply. Unfortunately, it seems it's not working in this case. As you can see here, when I make it "L," the whole section becomes big, making it bigger than smaller screens (like my Surface Pro screen). What I'm looking for is a piece of CSS code that makes the image responsive and automatically fits every screen size. 

The "L" option should do exactly what you need.

Try adding the below code in Custom CSS

.homepage #sections > :first-child {
    min-height: 100svh;
}