`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

Using jQuery to combine a variable with the image source in order to replace the image attribute

Tips for positioning a div to the left once the minimum width has been reached?

Instantly reveal menu by pressing button

Ways to monitor and measure clicks effectively

Issue with Wordpress css rendering on Internet Explorer

Can you explain the meaning of the tag "&" ">" "*" in the context of useStyles functions?

Ways to extract information from PayFast

What is the best way to dynamically duplicate the Bootstrap multi-select feature?

PHP: Locate a class within an HTML element using a regular expression

Guidelines for aligning a form in the middle of the screen (positioned between the navigation bar and footer

The process of making an image fill an entire div using Html and CSS

Guide on making a prev/next | first/last button functional in list.js pagination

Using HTML to position multiple lines of text alongside an image

Simple JavaScript numeric input field

Show the user's username on their profile page by retrieving the name from the database

Retrieve the border color using Selenium WebDriver

Display a JSON object on a web browser

What are the steps to achieve such a design?

The website code lacks a dynamically generated <div> element

Card with multiple links and tab-stopping