Pictures are not appearing correctly on screens with small dimensions

I'm struggling with creating a responsive website, specifically with images that have a background-imaged mask. While they look fine on larger screens, on medium and small screens, my headline and some images are not visible with the "masked" background image. Can you help me identify where I might be making a mistake? Is it a coding issue or a problem with my method?

The images that display on the screen can be found at the bottom of this page. In larger screens, there are no issues, but on other screens, the headline is not visible and only half of the images are shown, with the background failing to stretch to cover all images and the headline.

Visit the website here to have a better understanding of the problem.


          <!-- SCRIPTS -->
          <!-- JQuery -->
          <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
          <!-- Bootstrap tooltips -->
          <script type="text/javascript" src="js/popper.min.js"></script>
          <!-- Bootstrap core JavaScript -->
          <script type="text/javascript" src="js/bootstrap.min.js"></script>
          <!-- MDB core JavaScript -->
          <script type="text/javascript" src="js/mdb.min.js"></script>
          <!--Menü scroll change color-->
          <script>
            $(document).ready(function(){
              $(window).scroll(function(){
                var scroll = $(window).scrollTop();
                if (scroll > 10) {
                  $(".navbar").css("background", "black");
                } else {
                  $(".navbar").css("background", "transparent");
                }
              });
            </script>
          <!--Menü scroll change color-->
        
      

          html,
          body,
          header,
          #intro {
            height: 100%;

          }

          #intro {
            background:  url('../img/fft99_mf5629880.Jpeg') no-repeat center center fixed ;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            font-family:Arial;
          }

          .navbar-brand{
            font-family:      Gabriola;
            font-size:35px;
            padding-top:10px;
          }

          .navbar-nav li a  {
            color:white !important;
            font-family:   'Kristen ITC';
          }

          /* Rest of the CSS code */

        
      

View on a small screen

View on a medium screen

View on a large screen

Answer №1

To cater to smaller devices, consider implementing media queries. Here is a snippet of CSS specifically targeted for mobile phones:

header{
    height: auto;
}
#intro{
    padding: 0;
    height: auto;
}
.full-bg-img{
    position: relative;
}

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

What steps can I take to address the issue of my dropdown menu items overlapping each other on

Despite numerous challenges, I finally succeeded in getting my dropdown buttons positioned at the top of the screen, fitting into the navbar, and aligning next to each other. However, the dropdown menus now overlap each other and both drop below the "About ...

Issues with PHP login/logout functionality found - PHP

My login/logout php code is not displaying correctly in my navigation bar. I want the navbar to show 'logout' when the user is logged in, and vice versa. On top of my header.php page: <?php session_start(); require "includes/dbh.inc.php" ...

What steps should I take to correct the color selection of a button that has been pressed down

Here is the code snippet that I am currently working with: HTTP: <label class="instructions" for="hidden_x"> Insert X: </label> <button type="button" class="button" name="button_x" value="1" id="x_1" onclick="document.getElementById(' ...

Creating an interactive R Shiny application with custom CSS styling and a modal

I am encountering an issue when trying to incorporate a modal dialog with a specific CSS style within a R Shiny app. Individually, I can successfully implement a modal dialog without the CSS style and apply the CSS style without any issues. However, when a ...

Creating a full-width navbar in Bootstrap 4 using the container-fluid

Looking for assistance with making a Bootstrap navbar fill the entire width of a container-fluid using only CSS, as I do not have access to the HTML code. It works outside the container-fluid but can someone help me achieve the same result within the con ...

Setting the maximum height for a div element

Struggling to understand how a div can occupy the entire height of a container. In this particular scenario, I am aiming for the "photo" div to take up the full height, with the yellow and green content appearing on the right side of the photo. Below is th ...

Why isn't my lightbox able to read this specific property?

A gallery was created using both lightgallery and cycle2. Cycle is a carousel plugin while lightgallery is a lightbox gallery. Clicking on an image in the carousel opens it in the lightbox. Everything worked perfectly until a category in the carousel was ...

The custom font in my Next.js project is functioning perfectly in the development environment, but when I try to build it locally, the font doesn

Incorporating the Amazon Ember font as a custom font in my application has been a bit of a challenge. I followed the necessary steps of setting up a font.ts file in the lib folder and exporting the font correctly, as guided by various blog posts. Initially ...

Can someone please explain to me why the Transition effect is not functioning properly for input:checked::before?

Can someone please help me troubleshoot why the transition effect on the input's before element is not working when checked? If I can't solve this issue, I might have to consider alternative solutions. input[type="checkbox"]{ width: 160px ...

Prevent any sliding animations of content when the button is triggered

I've implemented a basic slideToggle functionality in jQuery. You can check out the code on JSFiddle here: $(document).ready(function() { $(".panel_button").on('click', function() { $(".panel").slideUp(); var targetPanel = $(thi ...

Having trouble saving text in a textbox?

Is there a way to store text in a text box for future use? Every time I reload the page, the text in the box disappears. I have attempted the following solution: <td align='left' bgcolor='#cfcfcf'><input type="text" name="tx ...

Utilize CSS block display for ::before and ::after pseudo elements within a div container

I have a CSS file that contains the following code snippet: .loader { width: 250px; height: 50px; line-height: 50px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-fam ...

Discovering the point of exit for a mouse from an image

Visit this website to see the effect in action: I am curious about how the image scrolls into and out of the direction where the mouse enters and leaves. Can you explain how this is achieved? ...

The iPhone header position switches when an HTML5 input type number is selected

I am currently working on a project that involves jQuery Mobile and PhoneGap. One issue I am encountering is when using the iPhone version, the header position changes when I click on an input type number. NOTE: When I focus on the input type number in my ...

Step-by-step guide on displaying a Bootstrap notification/toast (using MDBootstrap) following an error returned by Laravel

I am currently working on a project that resembles Instagram, but with basic features implemented using Laravel and MDBootstrap. Take a look at my design here As I create a form for updating personal information, I want to ensure that if Laravel encounte ...

Building a stunning ASP.NET MVC website with Bootstrap 4 modals using partial views

Having trouble updating from bootstrap 3.3.7 to 4.0.0? The modal with a partial view isn't working as expected, and instead of displaying the partial view, the modal content remains empty. Here's the code that worked with bootstrap 3.3.7: Bootst ...

Arranging the navigation bar at the top of my chatbot in HTML

Is there a way to position the navigation bar above the chatbot on my website? The following CSS code excerpt is from the "navigation bar css" file: *{ padding: 0; margin: 0; text-decoration: none; list-style: none; box-sizing: border ...

Print the page number using HTML and PHP

Is there a way to center page numbers in HTML? I have the code below that echoes the numbers, but they always appear on the left side of the page. I tried wrapping them in a div to center them, which worked, but then each number is enclosed in its own d ...

I'm wondering why using display flex with justify-content center and align-items center is not properly centering the elements both horizontally and vertically. Can anyone explain this?

As I delve into the world of JavaScript, I find myself coding simple JS, HTML, and CSS snippets to enhance my learning experience. These exercises help me grasp the concepts well enough to create various JS web elements and projects. My goal is to eventual ...

CSS: border-radius // background-color: white; rounded corners

Having recently delved into the world of HTML/CSS, I am currently working on a fun project to enhance my web development skills. In this project, I have created a search bar and successfully added round corners with border-radius. However, an issue arises ...