Ensure the content is optimized for all screen sizes, utilizing Bootstrap to adapt accordingly

I have a webpage with a header, a footer, and a container id="item" that contains a list of four items with their respective logos. I am attempting to make the item container responsive based on the screen size so the entire page fits the screen without requiring scrolling, regardless of the screen size.

However, I am uncertain how to achieve responsiveness for the item container and its logos based on the screen size. I have experimented with various options, but none of them seem to be working perfectly.

This is what I've done so far. I appreciate any suggestions you may have:

To view the code, click on this link.

html,
body {
width: 100%;
height: 100%;
min-height: 100%;
background: #66B34E;
color: #efefef;
}

.container {
max-width: unset;
}

.title {
background: #187be1;
padding: 20px;
width: 100%;
font-size: 11px;
color: aliceblue;
bottom: 0px;
right: 0px;
left: 0px;
text-align: center;
text-decoration: none;
margin-top: 7px;
margin-bottom: 50px;
}

.list {
max-height: 60%;
max-width: 100%;
}

.menu {
background: #f8f8f8;
border-radius: 0;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
padding: 20px;
width: 100%;
font-size: 11px;
color: black;
bottom: 0px;
right: 0px;
left: 0px;
text-align: center;
text-decoration: none;
}

.footer {
position: fixed;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
left: 0;
bottom: 0;
right: 0;
width: 100%;
background-color: #434A54;
text-align: center;
font-size: 12px;
padding-top: 7px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container title"><br>This is the header<br><br></div>
<div class="container list" id="item">
   <div class="container">
      <div class="row">
         <div class="col-6 menu"> <img src="https://www.google.co.uk/images/srpr/logo11w.png"/> <br>
            Item 1
         </div>
         <div class="col-6 menu"><img src="https://www.google.co.uk/images/srpr/logo11w.png"/><br>
            Item 2
         </div>
      </div>
      <div class="row">
         <div class="col-6 menu"><img src="https://www.google.co.uk/images/srpr/logo11w.png"/><br>
            Item 3
         </div>
         <div class="col-6 menu"><img src="https://www.google.co.uk/images/srpr/logo11w.png"/><br>
            Item 4
         </div>
      </div>
   </div>
</div>
<div class="container footer"><br>
   This is the footer<br>
</div>

javascripthtmlcsstwitter-bootstrap

Answer №1

Your #item should be responsive to the window already. To ensure this, try adding the following CSS:

#item img {
    max-width: 100%;
}

Answer №2

If you're looking to achieve a specific layout, consider using the display: table and display: table-cell CSS properties. Below is an example code snippet you can try out:

<li class='navUsernameLi'>
<div class="inner">
  <img class='navProfilePicture' src='http://via.placeholder.com/350x150'>
  <p class='navUsernameP'>Username</p>
  </div>
</li>

.navUsernameLi {
  float: right;
  margin-top: 10px;
}
.inner {
  display: table;
}

.navProfilePicture {
  display: table-cell;
  border-radius: 50px;
  vertical-align: inherit;
  height: 24px;
  width: 24px;
  vertical-align: middle;
}
.navUsernameP {
  display: table-cell;
  vertical-align: middle;
}

Answer №3

To achieve a full-size container for #item, you need to replace .container with .d-flex. The default padding and max-width set by Bootstrap for .container are not present in .d-flex.

Additionally, you can apply the class img-fluid to all your logos to ensure they fit within their containers.

I have made these corrections in the fiddle.

    html,
body {
width: 100%;
height: 100%;
min-height: 100%;
background: #66B34E;
color: #efefef;
}

.title {
  align-items: center;
background: #187be1;
  height: 80px;
width: 100%;
font-size: 11px;
color: aliceblue;
justify-content: center;
text-decoration: none;
margin-top: 7px;
margin-bottom: 50px;
}

.list {
  height: calc(100vh - 187px);
  background: red;
 }

.menu {
background: #f8f8f8;
border-radius: 0;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
padding: 20px;
font-size: 11px;
color: black;
text-align: center;
text-decoration: none;
}

.footer {
  color: white;
  align-items: center;
position: fixed;
  height: 50px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
left: 0;
bottom: 0;
right: 0;


<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex title"><br>This is the header<br><br></div>
<div class="list d-flex align-items-stretch row" id="item">
         <div class="col-6 align-items-center d-flex menu">
         <figure>
         <img src="https://www.google.co.uk/images/srpr/logo11w.png" class="img-fluid"/> <br>
            Item 1</figure>
         </div>
         
         <div class="col-6 align-items-center d-flex menu">
         <figure>
         <img src="https://www.google.co.uk/images/srpr/logo11w.png" class="img-fluid"/><br>
            Item 2</figure>
         </div>
         
         <div class="col-6 align-items-center d-flex menu">
         <figure>
         <img src="https://www.google.co.uk/images/srpr/logo11w.png" class="img-fluid"/><br>
            Item 3</figure>
         </div>
         
         <div class="col-6 align-items-center d-flex menu">
         <figure>
         <img src="https://www.google.co.uk/images/srpr/logo11w.png" class="img-fluid"/><br>
            Item 4</figure>
         </div>
         
      </div>
<div class="d-flex footer">
   This is the footer
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Experimenting with JavaScript within an Immediately Invoked Function Expression

My team leader is requesting that I encapsulate my JavaScript code within an Immediately-Invoked Function Expression (IIFE). However, I am struggling to use spyOn in my Jasmine spec file. How can I properly use spyOn on the following: (function(){ fu ...

javascriptjasmineiife

What could be causing my CSS and HTML to display incorrectly in IE and Chrome browsers?

I am currently facing a challenge with my landing page design. The positioning of a specific div element seems to be correct in Internet Explorer, but it is misaligned in Chrome. Is there a way to ensure consistent display across different browsers? The pr ...

htmlcssgoogle-chrome

How to Use Google Calendar API to Retrieve Available Time Slots for a Given Day

Is there a way to extract the list of available time slots from my Google Calendar? Currently, I am only able to retrieve the list of scheduled events. I am utilizing the Google Calendar npm package. google_calendar.events.list(calObj.name,{ timeMin ...

javascriptnpmgoogle-calendar-api

I desire to perform a specific task when there is a modification in the path using react router framework

Though I am mindful of it. props.history.listen((location, action) => { console.log("when route changes",location); }) However, I need to implement it in a slightly different way. For instance, let's cons ...

javascriptreactjsreact-router

Locate an element by its TEXT using SeleniumBase

When using SeleniumBase, I have a requirement to click on an element that is identified as shown below: <span class="text"> Contato PF e PJ </span> The specific text inside the element (Contato PF e PJ) needs to be ...

htmlseleniumseleniumbase

What could be the reason for the data being retrieved but not showing up on the web page?

When fetching data from an API, I encounter a problem where the Loader displays but the data never shows up on the page. The inconsistency of this behavior is puzzling to me. This issue seems to be more prevalent on smartphones than on computers. useEffec ...

javascriptreactjsaxiosfetchjsx

What is the best way to maintain an active PostgreSQL connection?

Essentially, I establish my database client using the following code: client = new pg.Client(conString); client.connect(); However, after a period of inactivity on the database, the client connection is likely dropped and results in this error message: ...

javascriptnode.jspostgresql

I received a single lengthy string as a response from an API request, and now I need to convert it into an array. The string contains values that are separated by commas. Can someone suggest the most efficient method

I am currently dealing with data retrieved from an API where some keys have values formatted in a specific way. The values of these keys are structured as arrays, but the array itself contains one lengthy string. Here is an example: "key_one&quo ...

javascriptarraysregex

Unravel the base64 encoded message from JavaScript and process it in Python

I'm currently facing an issue in Python while trying to decode a string sent by jQuery. Although I am not encountering any errors, I receive an encoding error when attempting to open the file. My objective is to decode the string in order to save it ...

javascriptpythonjquerybase64odoo

Display validation in HTML5 only when the form is submitted

Here is the code snippet I am referring to: <input required pattern="[0-9]{5,10}" oninput="setCustomValidity('')" oninvalid="setCustomValidity('Type something')" /> I'm looking for a way to remove o ...

javascriptjqueryhtmldom

Error: The function does not exist for collections.Map

I'm encountering a TypeError on my page: collections.Map is not a function. Below is my JavaScript code and I can't seem to figure out what the issue is. this.state = { collections: SHOP_DATA }; render() { const {collections} = this.sta ...

javascriptreactjs

Bootstrap 4 Carousel Properly Aligned on Small Screens

I am facing an issue with the carousel display. It appears perfectly centered on desktop and laptop screens but shifts to the right on mobile devices. I checked using Chrome developer tools and everything seems aligned correctly within the container. Here ...

htmlcssbootstrap-4carousel

Disable the setTimeout() function in order to prevent the countdown from refreshing

I have a JavaScript countdown function that is working well, but I am unsure how to stop and refresh the timer to extend the time. When I call the function again before it times out, it behaves strangely by showing two countdown timers because the updateTi ...

javascript

Angularjs - How come I am able to modify an object but not the list (ng-repeat) from a separate view?

After updating the customers object in the console, I noticed that the list (ng-repeat) is not reflecting the changes. What should I do? Interestingly, it works fine when I implement this function and view2.htm's HTML inside page.htm. HTML "page.htm" ...

javascriptangularjsangular-ui-router

Custom Vue Basic String Renderer for JSONForms

I'm delving into Vue JSONForms and attempting to develop a basic custom text renderer from scratch. While I am aware of the vue-vanilla package available in JSONForms, I want to grasp the fundamental requirements for creating a custom renderer as I an ...

javascriptvue.jsjsonforms

The MongoDB GridFS is refusing to accept the buffer being written

Hey everyone, I've been working on this issue for nearly a day now and can't seem to figure it out. I'm utilizing multer's inMemory flag to upload an image from my website. My approach involves writing the buffer received from multer to ...

javascriptnode.jsmongodbexpressgridfs

What can be done to prevent divs from overlapping? They display properly on a computer browser, but not on mobile devices like phones or tablets

Recently, I took on the task of creating an eBay template for someone. With some assistance and a bit of trial and error, I managed to get it working, albeit with what I like to call "not-so-great" code. However, there is one issue that arises when viewing ...

androidjquerycsshtml

css - flexible div height based on content

Issue encountered: In my website, I have a dynamically generated content inside a specific div. On the left side of the provided URL, you can see the current appearance of the div. It is worth noticing that the height of the container div (mainContent_mid ...

htmlcssfrontend

Top tips for utilizing CSS in a web component library to support various themes

Our team is currently in the process of developing a comprehensive design system that will be utilized across multiple projects for two distinct products. Each product operates with its own unique brand styleguide which utilizes design tokens, such as: Th ...

cssvue.jsfrontendvue-componentdesign-tokens

Textview is cluttering space with Html.fromhtml that is not needed

Situation 1 Here is the code I used to display HTML-formatted text in a TextView. However, it seems to be reserving space for a link that isn't visible. holder.textView.setMovementMethod(LinkMovementMethod.getInstance()); holder.textView.setText(Htm ...

androidhtmlandroid-layout