The banner appears unusually compact when viewed on mobile devices

It's about time for me to delve into the intricacies of responsive and adaptive design, but I'm hoping there's a straightforward solution to tackle this issue.

Here is my desktop web page as displayed in my browser:

https://i.stack.imgur.com/qrPiL.jpg

And here it is on my cell phone:

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

Although not very clear from these images, the banner appears too small on my cell phone.

Ideally, I want:

  • The width of the page content (including my <footer> element with a top border) should not stretch across the entire browser window when viewed on full screen desktop, but should fill the width of my cell phone screen.
  • The banner must never exceed the image width on my desktop, yet should expand to fit the whole width of my smaller cell phone

Is there a simplified way to achieve this?

htmlcssresponsive-designadaptive-design

Answer №1

Using media queries allows you to adjust styling based on the size of the viewport. Here is an example:

JS Fiddle Example

/* Styles for desktop here */
footer {
  background: red;
  width: 600px;
}
.banner > img {
  width: 400px;
}

/* Adjust properties when screen is less than 700px wide */
@media only screen and (max-width: 700px) {
  footer {
    width: 100%;
  }
  .banner > img {
    width: 100%;
  }
}

Answer №2

In addition to exploring media queries for optimal responsiveness, it is crucial to adjust the viewport meta tag within your header section. Ensure that you include 

<meta name="viewport" content="width=device-width, initial-scale=1">
in the <head> tags, instructing the mobile browser to display the page without zooming out excessively.

...
<head>
        <link rel="stylesheet" type="text/css" href="Style.css">
        <title>Hello World</title>
        <meta name="keywords" content="Placeholder for future content.">
        <meta name="description" content="Web development group">
        <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
...

You can then use F12 to view the webpage in phone emulation mode or access it directly on your mobile device.

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

The onclick handler fails to function following the injection of html using jquery AJAX

After using ajax to inject HTML into my page, the onclick handler on a specific part of that injected HTML does not seem to be functioning... Specifically, I am referring to this image... < img class="close_row" src="img/close.gif"/> In jQuery, I ...

jqueryhtmlajax

Tips on accessing a child attribute value such as id when clicking with jQuery

Whenever I click on a specific li element, I want to retrieve the id of that particular li instead of its parent. Currently, when clicking on a child li, both the parent and current ids are being displayed. I only need the current li id. I am seeking assi ...

jqueryhtml

Exploring the Features of PrimeNG Table Component in Angular 8

After attempting to implement p-table (PrimeNG table) in my Angular project and importing all necessary dependencies and modules using the CLI, I encountered the following error: ERROR: The target entry-point "primeng/table" has missing dependencies: - @ ...

htmlangulartypescriptangular-materialprimeng

What could be causing my tab code to not function flawlessly?

I am attempting to implement a tab concept on my website. For example, the tab names are Monday...Tue.. up to Sunday. Each tab contains an image file based on the days (size 460*620). When I run my page, it shows all images, but what I need is for the imag ...

javascripthtmlcss

Printing HTML to a VueJS page is simple and efficient

I have a situation where one of my attributes in a property contains an HTML string. Instead of rendering the HTML as expected, when I output it within my template, the browser displays the raw HTML code with tags intact. It doesn't interpret it as a ...

javascripthtmlstringvue.js

What is the best method to update numerous low-resolution image sources with higher resolution images once they have finished loading?

I'm currently developing a website that implements a strategy of loading low-resolution images first, and then swapping them for high-resolution versions once they are fully loaded. By doing this, we aim to speed up the initial loading time by display ...

javascripthtmlcssajax

What could be causing the CSS and HTML connection to fail?

I am currently working with Flask on the Atom editor to build a website. Despite specifying the correct path for the CSS file in the link, every time I load the page, it appears without any styling. I have attempted changing the paths multiple times with n ...

pythonhtmlcssflaskatom-editor

Update button text in real-time using JavaScript

I am currently working on a dropdown list that contains 5 elements displayed inside a button when pressed. I want the button to show a default text "Filter by:" before displaying the selected tab value. Additionally, I need the caret symbol to be visible. ...

javascriptjqueryhtmlcoffeescript

Creating a customized design for a React application with the use of Scss and JavaScript variables

Is there a method to incorporate JavaScript variables into an SCSS file? For instance, I have a JavaScript file containing the following code: // sky blue const PRIMARY_COLOR = '#489FEF' export { PRIMARY_COLOR} and I would like to utilize it ...

javascripthtmlcssreactjssass

Utilizing diverse values retrieved from HTML data attributes

*UPDATE Within my HTML, I have a list titled "#wordlist" that contains the words for my game, along with corresponding audio and images for each word. Everything is functioning correctly. As there will be multiple versions of the game, I've been tas ...

javascriptjqueryhtmlvariables

Verify the functionality of the input fields by examining all 6 of them

I'm facing a challenge with a validation function in my project that involves 6 input fields each with different answers. The inputs are labeled as input1 to input6 and I need to verify the answers which are: 2, 3, 2, 2, 4, and 4 respectively. For e ...

javascriptjqueryhtml

Navigate effortlessly with our vertical multi-level menu - simply hover over an option to reveal the next level of

This particular image demonstrates a vertical menu that is expanded. I am looking to display only the parent tag initially and upon hovering, show the next level and so forth. function display_children($parent, $level, $categoryModel) { $result = $ca ...

jqueryhtmlcss

One helpful tip for adjusting the size of a UI chip on the fly

I am attempting to adjust the size of a UI chip dynamically based on the font size of its parent elements using the em unit in CSS. My objective is to achieve something like this: style={{size:'1em'}} The issue I'm encountering: The chip e ...

javascripthtmlcssreactjsmaterial-ui

Contrast between using tbody td:nth-of-type(3){ border-bottom-color: transparent; } and tr.noborder td{ border-bottom: transparent; } within CSS styling

First Situation: h1{ text-align: center; } td{ width: 100px; height: 100px; border-right: 1px solid gray; border-bottom: 1px solid gray; } table{ margin: 0px auto 0px auto; } tbody td:nth-of-type(3){ border-right-color: transparent; } tbody tr:nt ...

htmlcss

Partially filling circles for a personalized coin-slider experience

Looking to create a unique coin-slider that changes the filled factor of a coin as it moves through a specific range of images. For example, when scrolling through 10 images, the filled part of the coin would transition from 0 to 1 depending on which image ...

csshtmlcanvas

What is the significance of using flexGrow in the parent div of a Material UI grid?

I am currently working on understanding a code example located at https://codesandbox.io/s/9rvlm which originates from the Material UI documentation (https://material-ui.com/components/grid/): import React from 'react'; import PropTypes from &ap ...

cssreactjsflexboxmaterial-ui

Retrieving an HTML page from one location and automatically populating textboxes with preexisting values on the receiving end

I'm currently facing a dilemma. Here's the issue: I need to load an HTML page (let's call it test.html) when a button is clicked on another page (referred to as home page). The test.html page has input boxes that I want to populate with p ...

javascriptjqueryhtmlajax

Determine in Jquery if all the elements in array 2 are being utilized by array 1

Can anyone help me figure out why my array1 has a different length than array2? I've been searching for hours trying to find the mistake in my code. If it's not related to that, could someone kindly point out where I went wrong? function contr ...

javascriptjqueryhtmlcssjive

The webpage Page.php is failing to display the newly added content

I have a collection of logos on my homepage (index.php) in WordPress, and they are positioned at the bottom just as I intended. However, these logos do not appear on all pages. Even if I add the exact same code to the page.php file in the exact position, ...

phphtmlwordpress

What is the best approach for designing a UI in Angular to showcase a matrix of m by n dimensions, and how should the JSON format

click here for a sneak peek of the image Imagine a matrix with dimensions m by n, containing names on both the left and top sides. Remember, each column and row must be labeled accordingly. ...

javascripthtmljsonangularuser-interface