What steps should I take to ensure that this website is responsive across all screen sizes?

Struggling with adapting to different screen sizes, especially with Bootstrap.

Below are the images for reference: https://i.stack.imgur.com/AlCjA.png

https://i.stack.imgur.com/FT2mU.png

Sass source code snippet: 

body
  background: $main-background
  margin: 0
  width: 100%
  height: 100%
  
 .footer
  position: absolute
  color: white
  font-family: Arial
  width: 100%
  height: 100%
  background-color: $plok-orange
  background-repeat: no-repeat
  background-size: 100%
  background-position: 50% 50%
  
  @media screen and (max-width: 1170px)
  min-width: 960px
  .footer
    width: 960px
    
.footer-left
  margin-top: $margin-top-footer
  float: left
  margin-left: 20px

.footer-left h1
  color: $plok-black
  font-size: 30px
  font-family: Helvetica
  font-weight: lighter

.footer-right
  margin-top: $margin-negative-footer
  float: right
  margin-left: 200px

.footer-right h1
  color: $plok-black
  font-size: 30px
  font-family: $font-stack
  font-weight: lighter

HTML Source Code:

<div class="jumbotron">
        <h1 class="display-4">..........</h1>
        <p class="lead">........</p>
        <hr class="my-4">
        <p>..........</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </div>
    <div class="footer">
        <div class="footer-left">
            <h1>Preview</h1>
            <div class="row">
                <div class="col-md-2">
                    <img src="images/plokster-art-1.jpg" alt="..." class="img-thumbnail">
                </div>
                <div class="col-md-2">
                    <img src="images/plokster-art-2.jpg" alt="..." class="img-thumbnail">
                </div>
                <div class="col-md-2">
                    <img src="images/plokster-art-3.jpg" alt="..." class="img-thumbnail">
                </div>
                <div class="footer-right">
                    <h1>Contact</h1>
                </div>
                    </form>
                </div>
                </div>
            </div>

Despite attempting a variety of max-width/min-width adjustments, the content still doesn't fit my original screen size. Using SASS for styling.`

htmlcsssass

Answer №1

You should apply some styling to your main element named jumbotron

I'm not completely sure what you're aiming for, but here's my suggestion.

Since your footer has the style position: absolute, it might be beneficial to have a relative parent element. You can try adding this to your main class:

.jumbotron {
  position: relative;
  width: 100%;
}

You could also consider using absolute positioning for the footer so that its position is fixed in place:

.footer {
  left: 0; bottom: 0; right: 0;
}

Keep in mind that percentage-based dimensions like width: 100% are calculated based on the parent element. So, setting it to 100% means it will take up the full width of its parent. It appears that you haven't applied any styles to your main element yet.

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

Issue with Angular ngFor not updating radio button value when ngModel is set

Hello, I am fairly new to working with Angular and could really use some assistance with a problem I've run into. Essentially, I am receiving an array of objects from an API like this: [{name: "abc", score: 2},{name: ""def, score: ...

javascripthtmlangulartypescriptradio-button

Using Jquery to toggle the visibility of divs based on radio button selections

I am struggling to hide the divs with the radio buttons until their title is clicked on. However, I am facing issues as they are not showing up when their title is clicked on. Any assistance would be greatly appreciated. SPIKE <!DOCTYPE html> &l ...

javascriptjqueryhtmlcssforms

What is the process for aligning Item1 to the left and Item2 & Item3 to the right using MUI React?

I'm working on a component that contains three different Typography components. I need to align "summary" to the left, while 'miles' and 'duration' should be aligned to the right. https://i.stack.imgur.com/7e9sY.png Here's t ...

javascriptcssreactjsmaterial-ui

Implementing JavaScript for showcasing weights

I've encountered a JavaScript function that modifies user preferences for weight units, allowing them to choose between metric and imperial measurements. When displaying weights on my page, I typically present them as follows: This is a brief explan ...

javascriptjqueryhtml

Having trouble with jQuery validation: Seeking clarification on the error

I have implemented some validations on a basic login page and added jQuery validation upon button click. However, the code is not functioning as expected. I have checked the console for errors but none were displayed. Here is the code for your review: ...

javascriptjqueryhtml

What is the best way to choose the initial p tag from an HTML document encoded as a string?

When retrieving data from a headless CMS, the content is often returned as a string format like this: <div> <p>1st p tag</p> <p>2nd p tag</p> </div> To target and select the first paragraph tag (p), you can extract ...

javascripthtmlselectors-api

CSS Background Color Not Displaying Correctly

My HTML5 page has an issue where the image is taking over the background color of the entire page. I want to adjust it so that the image appears in the background, while the background color shows up behind the content on top. Check out my code below and l ...

csshtml

Is there a different method like Calc() to create a static sidebar alongside content?

Is there a way to achieve a fixed sidebar on the left and a content area on the right without using calc() in CSS? I'm looking for a more universally supported method that works across different browsers. .left-sidebar { width: 160px; ...

css

Determine if an HTML element contains a specific class using JavaScript

Is there a simple method to determine if an HTML element possesses a particular class? For instance: var item = document.getElementById('something'); if (item.classList.contains('car')) Remember, an element can have more than one clas ...

javascripthtmlclasscss

The filter on the mobile version is not displaying correctly

When I select a category in the input filter, only items with the same category are displayed when clicked. However, when I click on "Others" on the desktop version, only rows with that category are shown, but on mobile after resizing and filtering, nothin ...

javascripthtmljquerycss

Effortlessly retrieving the id attribute from an HTML tag using jQuery

Currently, I am encountering an issue with a code snippet that is designed to extract the value from an HTML tag. While it successfully retrieves a single word like 'desk', it fails when attempting to do so for an ID consisting of two or more wor ...

javascriptjqueryhtmltags

JavaScript: The functionality of calling functions through buttons ceases to function once the page is updated without reloading

I am trying to create a program that consists of one HTML page, where I can dynamically update and populate it with different elements using JavaScript. The main feature of the program is a button that remains constant in every version and displays a mod ...

javascripthtmlcssfunctionweb

Designing an HTML and CSS footer navigation bar

Can you help me create a footer menu using HTML and CSS? Check out this image for reference Any tips on how to style it with cascading style sheets? <footer> <ul> <li><a href="">Home</a> </li> <li> ...

htmlcssmenu

Give GetElementsByClassName a shot

Hey, have you tried using js ref_doc_getelementsbyClassName? "I keep getting the error message 'Uncaught TypeError: Cannot set property 'value' of null' " Check out this HTML code snippet: <input type="text" cla ...

javascripthtmljqueryclassname

Ways to update div content following a successful AJAX call

I have a form that utilizes AJAX requests, and when the input fields are not filled correctly and the submit button is clicked, error messages are displayed without refreshing the page. While this functionality works, a problem arises when the form is subm ...

javascripthtmljqueryajaxforms

Sidenav Content with all elements having opacity applied

How can I ensure that all page elements have a black background color when the mobile navigation is opened on the left screen, while ensuring that my sidebar and content image do not get overlaid by the black background? Here is my code: function openNav( ...

javascripthtmlcsswordpress

The input box refuses to accept any typed characters

I encountered a strange issue where the input box in the HTML was not allowing me to type anything. const para = document.createElement('p') const innerCard = document.getElementsByClassName('attach') for(let i = 0; i < innerCard.l ...

javascripthtmlcss

What is the best way to conceal a canvas or another item?

Within my main canvas, there are three smaller canvases and a text element. <canvas id="Background" width="350" height="300" style="border:6px solid black; position: absolute; left: 10px; top: 10px;"> </canvas> <canvas id="Canvas1" width ...

javascripthtmlcsscanvas

What is the best way to adjust the dimensions of a blank image without altering the size of

I am attempting to set the size of an empty image to 150px. While using float: left works on Firefox, it does not have the same effect on Google Chrome. Here is the HTML code: <div> <img src='some broken url' alt='no image'& ...

htmlcss

Assessing the performance of YUi and BackBone

As I embark on a new project, one of the crucial decisions to make is regarding the architecture. Currently, I am contemplating the selection of front-end components. I plan to utilize HTML5, CSS3, and Javascript for this purpose. When it comes to choos ...

htmlcssframeworksbackbone.jsyui