What is the best way to ensure an image is shown in full screen exclusively on mobile devices?

My goal is to have two different site templates, one for desktop (which is already good) and one for mobile.

For the mobile template, I want it to display only an image that fills the entire screen. The image should take up all the available space in terms of height and width. Once a button is pressed, the page will scroll down to reveal the rest of the content.

Here's an example:

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

I have created an example on Fiddle at jsfiddle.net/gtw7375/yrmbsfhu/

However, I am not sure how to center the image and make it the sole content occupying the entire height of the page. Can anyone advise me on how to achieve this?

htmltwitter-bootstrapcssfrontend

Answer №1

Add a new block element that fills the entire width and height of the viewport. Next, insert the desired image as a background using the CSS property: background-size: cover.

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

I am curious about this "normalize.less" that appears in the F12 Developer Console

Trying to track down information on this mysterious "normalize.less" that is appearing in the Chrome 76 developer console has proven to be a challenge for me. In Firefox 69's console, it displays bootstrap.min.css instead, leading me to believe that i ...

cssless

Insert JavaScript code into the head of the document (including the complete script code)

I am looking to insert a script in the head section of a website so that the target HTML appears as follows: <head><script type="text/javascript">*some code...*</script></head>. This particular script works perfectly: var head = d ...

javascripthtmlwebheader

Create a fresh CSS class using the Chrome developer tool

Can a brand new CSS class be inserted in Chrome dev tools in this way? .myclass { background-color: yellow; } ...

cssgoogle-chromegoogle-chrome-devtools

Learning how to effectively incorporate two matSuffix mat-icons into an input field

I'm currently experiencing an issue where I need to add a cancel icon in the same line as the input field. The cancel icon should only be visible after some input has been entered. image description here Here's the code I've been working on ...

javascripthtmlcss.netangular

Implementation of Ionic Tabs with Hidden Back Button

Is there a way to hide the back button for a specific tab in my ionic app without affecting the rest of the page? I tried adding "hide-back-button="true" to the tab code, but it didn't work as expected. I want to achieve something like this: <ion ...

htmlionic-framework

Is there a way to modify the styling for ListItemButton specifically when it is in a selected state?

My first experience with MUI involves trying to customize the styling of a button. After installing my project with default emotion as the styling engine, I attempted to override the existing styles using the css() method mentioned in the documentation: ...

cssreactjsmaterial-ui

Set up a mouseover function for a <datalist> tag

Currently, I am delving into the world of javascript/jquery and I have set up an input field with a datalist. However, I am encountering a slight hurdle - I am unable to trigger an event when hovering over the datalist once it appears. Although I have man ...

javascriptjqueryhtml

What is the best way to perfectly align an SVG inside its container?

Is there a way to horizontally center this SVG within .svg_wrapper? .svg_wrapper { border: 1px solid grey; width: 200px; } <div class="svg_wrapper"> <svg viewBox="0 0 600 425"> <path d="M 175, 175 m 0, -75 a 75,75 0 1,0 ...

csssvg

Tips for creating semi-circular shapes using CSS gradients

I am trying to design a div element with a background made up of two colors divided by a half circle: My preference is to use gradients for easier animation purposes. I am looking to avoid using pseudo-elements or border-radius, and my HTML structure limi ...

cssbackground-imagegradient

Angular API data causing an undefined error in the template

When attempting to display values in an HTML template from API data, I encountered an issue. Despite not defining all the values in the object, the data is displayed correctly. However, an error appears in the console: TypeError: Cannot read property &ap ...

htmljsonangular

Sass flex order has no effect on elements that are generated

I encountered an issue with the rendering of SVGs in my project. Currently, they are displayed correctly in desktop mode, but in mobile portrait mode, I need to change the order of one specific SVG element within the row. To achieve this, I decided to use ...

cssreactjssvgsassflexbox

How to use jQuery to extract a particular text from an anchor tag

If I want to choose a specific anchor text and make changes to it, I can do so by targeting anchors with a certain href attribute. For example, on a page with multiple unordered lists, each containing different links: <ul> <li><a href="v ...

javascriptjqueryhtml

Can you explain the significance behind this unorthodox CSS code?

Assisting a customer in updating their Shopify theme. The previous designer used an unconventional method to establish the grid system. I require assistance in decoding the code. I came across an old article on this topic but still couldn't grasp it. ...

csscss-selectors

What alternative can be used for jquery isotope when JavaScript is not enabled?

Is there a backup plan for jQuery isotope if JavaScript isn't working? For instance, if I'm using the fitColumns feature, is there an alternative layout style available in case JavaScript is disabled, similar to what is seen on the new Myspace? ...

javascriptjqueryhtmlcssjquery-isotope

ToggleClass is not being applied to every single div

I am currently designing a pricing table with hover effects. You can view the progress here: Upon hovering on a pricing table, all the divs are toggling classes which is not the desired behavior. I want each element to have its own separate interaction. ...

javascriptjqueryhtmlcss

Is there a way to adjust the height pixel value in my code so it can be dynamic?

I have created a simple script that allows selected objects to fade in as the user scrolls down. However, my issue is that this script is quite rigid. If I were to apply it to 20 different objects, for example, I would need to manually adjust the height ea ...

javascriptjqueryhtmlcssweb

Just recently updated to Angular 14 and I'm encountering a problem with images not loading from the assets folder. I'm wondering if there is a configuration step I missed. Could someone please

https://i.stack.imgur.com/4LEQ4.png https://i.stack.imgur.com/3sxzF.png Is there a configuration missing in Angular 14? When I try using <img [src]="assets/images/sidebarNav"> with ./, ../, it doesn't work. I have followed the instr ...

htmlangularwebbrowser

Angular login/signup modal/dialog component for seamless user authentication

Currently, I am working on adding a login/signin dialog to my app similar to the one used by Medium. After doing extensive research online, I have decided to use the $modal from angular ui-bootstrap for this. Can anyone please recommend a tutorial that wil ...

javascriptangularjstwitter-bootstrapwebfrontend

What is the best way to receive detailed error messages from the LESS compiler when using it in Symfony 2?

I have successfully implemented dynamic compilation of LESS scripts to CSS in Symfony 2 by following this guide: However, I am facing an issue where if there is an error in a LESS script, the compilation fails and no CSS is generated for the browser. Is t ...

csssymfonyless

Refresh meta tags in a Next.js/React app

In the process of optimizing a website for SEO, I am facing the challenge of updating the meta description's content dynamically without using any third-party libraries. While I have successfully implemented the functionality, it currently requires a ...

javascripthtmlreactjsnext.js