`Can you guide me on the proper path for designing this website layout?`

Question

`Can you guide me on the proper path for designing this website layout?`

As I embark on creating my first website, I have a specific vision in mind. I want the full display on a computer screen to show all the information and links without any need for scrolling. However, when the window is resized to smaller screens, I would like it to become scrollable with the footer positioned at the bottom of the page. The following images illustrate my idea:

Mobile version

Laptop version

While I have been able to create a responsive design that resizes correctly, I am facing issues with the footer not displaying properly in the laptop version. Despite enjoying problem-solving, I am currently stuck on finding an effective solution to this issue. I came across a website that accomplishes what I am aiming for, however, the code seems to be from a webservice making it impossible for me to decipher: petermckinnon.com

If anyone has suggestions on what framework I should use to achieve this layout, I would greatly appreciate some guidance.

html css

Answer 1

Answer №1

To better assist you, I would need to see the code causing the issue. It sounds like it may be related to positioning. However, I have created a layout example for the desktop site. I enclosed everything in one container with a height of 100vh and positioned the footer at the bottom using

.footer{position:absolute;bottom:0;}

. Additionally, I utilized media queries to ensure responsiveness.

Here is the layout example (best viewed in full page):

html,
body {
  margin: 0;
}

.fullpage {
  height: 100vh;
  overflow-y: hidden;
}

.pic-wrap {
  float: right;
  width: 50%;
  object-fit: cover;
  height: 100vh;
}

.pic-wrap img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.content {
  float: left;
  width: 50%;
  background-color: #00ffff;
  height: 85vh;
}

.footer {
  background-color: orange;
  height: 15vh;
  position: absolute;
  bottom: 0;
  width: 50%
}

@media only screen and (max-width: 720px) {
  .fullpage {
    height: auto;
    overflow-y: visible;
  }
  .pic-wrap {
    display: inline-block;
    width: 100%;
    height: 50vh;
  }
  .content {
    float: none;
    display: inline-block;
    width: 100%;
    height: auto;
  }
  .footer {
    height: 15vh;
    position: relative;
    bottom: 0;
    width: 100%
  }
}

<div class="fullpage">


  <div class="pic-wrap">
    <img src="https://www.gettyimages.com/gi-resources/images/RoyaltyFree/Apr17Update/ColourSurge1.jpg" alt="" />
  </div>
  <div class="content">
    Content Here<br> Content Here<br> Content Here<br> Content Here<br> Content Here<br> Content Here<br> Content Here<br> Content Here<br> Content Here<br> Content Here<br> Content Here<br> Content Here<br> Content Here<br> Content Here<br>    Content Here<br>
  </div>
  <div class="footer">
    Footer
  </div>


</div>

Answer 2

To better assist you, I would need to see the code causing the issue. It sounds like it may be related to positioning. However, I have created a layout example for the desktop site. I enclosed everything in one container with a height of 100vh and positioned the footer at the bottom using

.footer{position:absolute;bottom:0;}

. Additionally, I utilized media queries to ensure responsiveness.

Here is the layout example (best viewed in full page):

html,
body {
  margin: 0;
}

.fullpage {
  height: 100vh;
  overflow-y: hidden;
}

.pic-wrap {
  float: right;
  width: 50%;
  object-fit: cover;
  height: 100vh;
}

.pic-wrap img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.content {
  float: left;
  width: 50%;
  background-color: #00ffff;
  height: 85vh;
}

.footer {
  background-color: orange;
  height: 15vh;
  position: absolute;
  bottom: 0;
  width: 50%
}

@media only screen and (max-width: 720px) {
  .fullpage {
    height: auto;
    overflow-y: visible;
  }
  .pic-wrap {
    display: inline-block;
    width: 100%;
    height: 50vh;
  }
  .content {
    float: none;
    display: inline-block;
    width: 100%;
    height: auto;
  }
  .footer {
    height: 15vh;
    position: relative;
    bottom: 0;
    width: 100%
  }
}

<div class="fullpage">


  <div class="pic-wrap">
    <img src="https://www.gettyimages.com/gi-resources/images/RoyaltyFree/Apr17Update/ColourSurge1.jpg" alt="" />
  </div>
  <div class="content">
    Content Here<br> Content Here<br> Content Here<br> Content Here<br> Content Here<br> Content Here<br> Content Here<br> Content Here<br> Content Here<br> Content Here<br> Content Here<br> Content Here<br> Content Here<br> Content Here<br>    Content Here<br>
  </div>
  <div class="footer">
    Footer
  </div>


</div>

`Can you guide me on the proper path for designing this website layout?`

Answer №1

Similar questions

Setting a maximum character limit for an HTML textarea

Connecting event listeners to offspring elements, the main element, and the entire document

Troubleshooting Vue.js nested v-for with <tr> tag problem

What is the best way to set a div's size to a constant value?

After clearing the option, the onChange function stops functioning

Establishing a class for wp_nav_menu

Updating React JSX class based on certain conditions without manipulating the actual DOM

How can I incorporate dynamic moving lines into my website's loading sequence?

Analyzing Selenium Page Source

Is it possible to modify the button icon on hover by utilizing chakra-ui and vanilla-extract?

Third Party Embedded Video requiring SSL Certificate

Unique option preservation on customized HTML select menus - Maintain original selection

Divide Footer Information into Two Sections: Left and Right

An unusual outcome occurred while attempting to duplicate the text

Is dividing a container into equal sections possible with flexbox?

What is the best way to ensure that a div containing lengthy text wraps to the next line as if it were only text overflow?

Create a dynamic webpage where two div elements glide in opposite directions

Implementing automatic page breaks in Laravel using the mpdf libraryLet me know

Activate a change or response when the input value in Javascript is altered

Easy-to-use form input ensuring a constant total of 100