The background image is not displaying correctly on mobile devices

I'm struggling to make the image fit the entire screen on a mobile device using the code below. Interestingly, it displays correctly on my personal computer.

#topContainer {

  height:1048px;
  width: 100%;

  padding: 0;
  margin: 0;

}

#div1 {

  background-image: url("images/Healthy-Eating.png");
  height:1048px;

  margin: 0;
  background-size:cover;
  position: relative;
  padding-top: 40px;
}



#freeEbook {

  background-color: rgba(0, 0, 0, 0.6);
  height: 750px;
  width: 535px;
  border-bottom: 0px;
  transition: background-color .5s ease 0s;
  position: absolute;
  color: #fff;
  font-size: 1em;
  padding: 10px;

}

Could you please help me understand why this is happening and suggest how I can rectify it?

htmlcsstwitter-bootstrap-3

Answer №1

A fixed height of 1048px is being applied to your image, #div1. This means the image will always be 1048px high regardless of screen size. While this might work for your computer, it could cause issues on smaller devices like phones! Consider using the following CSS for #div1: 

#div1 {
  background-image: url("images/Healthy-Eating.png");
  height: 100vh;
  width: 100%;
  margin: 0;
  background-size: cover;
  position: relative;
  padding-top: 40px;
}

With height: 100vh, the image's height will now adjust to be 100% of the viewport height.

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

Place the text (menu) adjacent to the navigation bar

I am currently using bootsrap 4 alpha 6 in combination with midnight.js to alter the color of my navigation menu toggler. I am trying to incorporate a text element (MENU) alongside it, similar to the example shown in the Capture image. For the text toggler ...

javascripttwitter-bootstrapcssbootstrap-4

Implementing additional input with Jquery causes tooltips to malfunction

I am developing a form that allows users to add as many rows as needed. Each input is being treated as an array for easy data storage in the database, which is a new concept for me. $(document).ready(function() { var maxField = 10; //Limitati ...

javascriptjqueryhtmlcssmaterialize

Exploring the implementation of toggling functionality for nested children within <li> elements using jQuery

Unable to get the toggle function working on child nodes. Can someone assist me with this issue? $(document).ready(function() { $('label.tree-toggler').click(function() { $(this).parent().children('ul.tree').toggle(300); }); ...

javascriptjqueryhtmlcss

"Utilizing a flexible grid system in Bootstrap to create 2 or

I am looking to create a layout with a variable number of columns using row span. Specifically, I want 3 columns on XS, 2 columns on SM (with the first 2 columns stacked on top of each other), and 3 columns on LG. I am unsure how to make the row span respo ...

csstwitter-bootstrap

Adapting Vue.js directive based on viewport size - a guide

Having an element with the v-rellax directive, I'm utilizing it for prallax scrolling in this particular div: <div id="image" v-rellax="{ speed: -5 }"></div> Currently, there's a need to adjust the speed property ...

javascripthtmlcsslaravelvue.js

A unique way to present data: An HTML table featuring four fixed columns with horizontal scrolling

I've been having difficulty creating a table with fixed first four columns while allowing the rest to scroll horizontally. I came across this example first column fixed Although the example has the first column fixed, I'm struggling to extend it ...

csshtml-table

Clicking on numerous hyperlinks using Selenium IDE

Looking to automate some websites using Selenium IDE? Here's how you can achieve this: Click Click Link 1 do some clicking inside that link go back to the list of links Click Link 2 do some clicking inside that link go back to the list of links Cli ...

htmlseleniumxpathselenium-ide

Adjust the color of the text in the Stepper component using React Material UI

Is there a way to modify the text color within the stepper? Specifically, I aim to have the number 3 displayed in black instead of white: Image Link ...

cssreactjsmaterial-ui

Applying a unique style to an element using its ID is effective, but using a class does

Incorporating twitter bootstrap tables has been a focus of mine lately, particularly when it comes to custom styling such as setting background colors for table elements. Here's what I've discovered: by assigning id="foo" to each <td> elem ...

htmlcsstwitter-bootstrap

"Freezing issue with Angular big table causing web page to lock up during

Looking for a way to improve the performance of an HTML table search function that is currently running very slowly and freezing the web page upon loading and searching. The table needs to be within the HTML file itself, not pulling data from a server. Any ...

javascripthtmlangularjsfreeze

An interactive top navigation bar paired with three dynamic columns housing scrollable content, all crafted seamlessly with Bootstrap 4

I recently updated my layout using bootstrap but I am facing a glitch. I want the layout to have fixed scrolling only within the columns, without affecting the entire page. Everything works fine until I add some text inside any of the columns, then the who ...

cssbootstrap-4

Do you have a title for the pre code section?

When it comes to tables, there's a <caption>, and for figures, there's a <figcaption>. But what tag should be used for pre? (The goal is to provide a caption for a listing, but since the <listing> tag has been removed, <pre& ...

htmlsemantic-markup

What's the deal with this occurrence? The width of the HTML window seems

Exploring different html markup and layouts, I stumbled upon this JSFiddle: http://jsfiddle.net/vLJAq/15/. I made some modifications to it, but one thing that puzzles me is why the green box disappears when the window width is reduced? Here's the cod ...

htmlcss

Converting a string to regular text in JavaScript (specifically in ReactJS)

When I fetch data from an API, sometimes there are special characters involved. For example, the object returned may look like this: { question : "In which year did the British television series &quot;The Bill&quot; end?" } If I save t ...

javascripthtmlreactjsstring

Ways to automatically refresh HTML table in Django framework

How can I dynamically update the search content under the hostname column in an HTML table? The search content needs to be updated every time, and the row number should increase according to the number of hostnames entered by the user. Below is my index.h ...

javascriptpythonhtmldjangoajax

Ways to retrieve element(s) and delete a specific class located in the DOM structure

This is my first time using stackoverflow and posting a question here! :] Can someone guide me on the best way to write JQuery code for this particular task? Task: My goal is to remove the 'active' CLASS from a nav element when it is active: ...

javascriptjqueryhtmlcssdom

HTML - Link to enable automatic printing of the page

Assignment: Develop a hyperlink (HTML <a> tag) that triggers the printing of the webpage without the user manually pressing CTRL + P. My search for information on this topic has not yielded a definitive answer. Some sources suggest using JavaScript ...

htmlprinting

Navigating through a multistep form in AngularJS using UI Router and arrow keys for seamless movement

Is there a way to navigate to the next or previous form step using arrow keys in AngularJS UI Router? The code provided below is currently allowing navigation with previous and next buttons. .config(function($stateProvider, $urlRouterProvider) { $stat ...

javascripthtmlangularjsmulti-step

I am experiencing issues with my Ajax code where it is not successfully sending data to the server and

Can someone help me troubleshoot my PHP AJAX code? I am new to PHP and just getting started with learning AJAX. index.html: <html> <head> <script> function sendmessage(str) { var xmlhttp; if (window.XMLHttpRe ...

phphtmlajax

Enhancing Form Spacing with Bootstrap

I have been working on a form design, but I am now facing alignment issues. The problem is more noticeable on larger screens compared to smaller ones. The main issues I am encountering include extra spacing in the social links section even though there ar ...

csstwitter-bootstrapbootstrap-4