Attempting to utilize media queries in order to create a responsive header image

I am currently using Bootstrap 5 to build a website and I am facing an issue with making the header image responsive on mobile devices. While it looks good on desktop, laptop, and tablet screens, on mobile the text and button are not aligning well as they do on other screen sizes.

Here is how it appears on desktop: https://i.sstatic.net/oVxwp.jpg

And this is how it looks on mobile: https://i.sstatic.net/M3j9i.jpg

:root {
    --desktop-min: 1200px;
    --laptop-min: 900px;
    --laptop-max: calc(var(--desktop-min) - 1px);
    --tablet-min: 720px;
    --tablet-max: calc(var(--laptop-min) - 1px);
    --mobile-min: 300px;
    --mobile-max: calc(var(--tablet-min) - 1px);
    }

#navbar-color {
    background-color: hsl(210, 45%, 30%);
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-light .navbar-toggler {
    border: 1px solid hsl(0, 0%, 100%);
    outline: none;
    box-shadow: none;
}

.carousel-inner img {
    width: 100%;
    height: 100%;
    filter: brightness(0.6);
}

.carousel-caption {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
}

.carousel-caption h1 {
    font-size: 500%;
    transform: uppercase;
    text-shadow: 1px 1px 15px hsl(0, 0%, 0%);
    
}

.carousel-caption h4 {
    font-size: 200%;
    font-weight: 500;
    padding-bottom: 1rem;
    text-shadow: 1px 1px 10px hsl(0, 0%, 0%);
    
}

....

htmlcssresponsive-designbootstrap-5web-frontend

Answer №1

Due to the .carousel-caption being set to position: absolute, it does not affect the size of its parent elements. Adding overflow: hidden to .carousel-inner further hides any content that does not directly impact the container's size. Utilizing both styles simultaneously can lead to issues.

Regarding the background image, its downward continuation is hindered by being stretched horizontally through width: 100% rules, resulting in no additional image content once its height is reached. Consider using CSS background-image for alternative options. Alternatively, setting a background color may be a solution, acknowledging that not all parts of the page will be covered by an image.

Answer №2

If you're new to this, getting the mobile viewport just right can be a challenge, but here are some tips to help:

  1. Adjusting Caption Position: Play around with the top position of the .carousel-caption element in your media query for mobile to fine-tune where the caption text and button sit on mobile screens. Experiment with different values until you find the perfect placement.

  2. Font Sizes and Padding: Focus on adjusting the font sizes and padding of the caption elements and button in your mobile media query. Keep tweaking these values to ensure the text and button are clear and visually appealing on mobile devices. Remember, readability is key.

  3. Enhance Button Styling: Aside from font size and padding, consider adjusting the width of the button to improve its appearance on mobile screens. Keeping it proportional can make a big difference in the overall look of your design.

  4. Carousel Indicators: If the carousel indicators aren't essential on smaller screens, follow your approach of hiding them in the mobile media query. Just be sure to thoroughly test the carousel navigation post-update to ensure smooth functionality.

  5. Real Device Testing: To get an accurate representation of how your website appears on various screen sizes, nothing beats testing on an actual mobile device. Emulators and developer tools have their limitations, so use them as a supplement to real device testing.

Remember, achieving responsiveness takes time and experimentation. Don't be afraid to iterate and test until your design looks great on all devices. Good luck with your coding journey!

*Hopefully, these tips help you out. Happy coding and best wishes.*

Answer №3

Begin with a basic approach. Simply set the height to 100% and incorporate a background image that covers the entire document.

html {
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0;
  background-image: url(https://picsum.photos/1500);
  background-size: cover;
}

Progress gradually from this starting point.

html {
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0;
  background-image: url(https://picsum.photos/1500);
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font: bold 50px sans-serif;
  text-shadow: 0 0 10px black;
}
Hello

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

Scrubbing the htaccess file for custom redirect rules in cPanel

I am looking to optimize my .htaccess file for the following purposes: Removing the .html extension Redirecting non-www URLs to www Forcing HTTP to HTTPS Changing .com/index.html to .com/ Implementing all redirects through cPanel's 'Redirects&a ...

html.htaccesshostingcpanel

Navigating a collection of objects in JavaScript: A step-by-step guide

My data consists of objects in an array with the following structure: [{\"user\":\"mcnewsmcfc\",\"num\":11},{\"user\":\"ManCityFNH\",\"num\":7}]; To clean up the array, I'm using this code: ...

javascripthtmlarrays

The Cordova advanced HTTP POST request functionality is not functioning as expected

I'm currently in the process of connecting my backend to a cordova application, and at this early stage of development, I'm attempting to test it in the browser. Unfortunately, I'm facing an issue with the post request not working, as well a ...

androidhtmlnode.jsapicordova

Automatic Clicks in the Chrome Console

I've come across a website that requires me to click on multiple elements scattered throughout the page Here is the code for one of the elements: <span class="icon icon-arrow-2"></span> Is there a way to provide me with the console comm ...

javascriptjqueryhtmlcssgoogle-chrome

Angular JS Unveiled: Deciphering HTML Entities

I'm looking for a solution to decode HTML entities in text using AngularJS. Here is the string I have: "&quot;12.10 On-Going Submission of &quot;&quot;Made Up&quot;&quot; Samples.&quot;" I need to find a way to decode this u ...

javascripthtmlangularjshtml-entitiesutf8-decode

How to Show Byte Array Image in AngularJS HTML Using a Web API Service

I am in the process of developing an AngularJS Application and for my service, I am utilizing .NET C# for coding purposes. I am currently following the code structure outlined in a previous post about loading images from a C# Byte array and placing them in ...

c#htmlangularjsimagearrays

Run an ajax function when a variable is populated with data

My current dilemma involves a session variable email=$_GET['email'];. I am seeking a way to trigger an ajax function only when this variable is available, and to set it to do nothing if the variable is not present. What is the technique for invo ...

phphtmlajax

Guide on adding HTML to a specific div element in jQuery by utilizing the keyword "(this)"

I have been working on a script for my PHP page in Wordpress to add titles to images in my photo gallery that open in a lightbox. Here's what I developed: $(".responsive1").bind("click", function() { $(this).("<div class='imgTitle ...

javascriptjqueryhtmlappendto

The presence of certain characters is leading to problems in the console

Similar Question: Escaping a String for JavaScript Usage in PHP? The characters in my text are causing errors. When I input special characters such as: !\"$%^&()-=\'.,:;/?#~/\\>< An error saying "Syntax error ...

phpjavascriptjqueryhtml

The issue with the left border color not functioning in JavaScript

Attempting to alter the border-left-color property using this script is resulting in a Uncaught SyntaxError: Unexpected token -. Is border-left-color actually supported? Javascript function logoChange() { var description = new Array (); description[0] ...

javascriptjqueryhtmlcss

Tips for enhancing the appearance of the dropdown scrollbar in PrimeNG

Just started exploring Angular and I've been struggling to customize the scrollbar on a PrimeNG dropdown. Does anyone have any tips or tricks to achieve this? Here is the HTML code: <p-autoComplete placeholder="- Select -" (onSelect)="onSelect(dh ...

htmlcssangularprimeng

Adding Jquery content to HTML templates using Jinja2: A Simple Guide

Looking at my HTML code Base.html <title> {% block title %}{% endblock %} </title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="collapse na ...

pythonhtmljqueryflask

Looping through two arrays simultaneously in Angular JS

Seeking help to display two arrays in a conversational manner using ng-repeat Let's say we have two arrays defined as follows: messages_send = ["hi","good, How about you?","cool","LOL","NFW"] messages_received = ["hey, How are you?","good, Thanks ...

htmlangularjsiteration

The Bootstrap 5 Navbar dropdown is not as responsive as the dropdown showcased in the official documentation

I tried utilizing Bootstrap 5 to implement a dropdown functionality, but unfortunately, the dropdown on my website isn't behaving as expected. Unlike the dropdown in the official Bootstrap documentation, my dropdown remains open at all times even when ...

htmlcssdrop-down-menufrontendbootstrap-5

Creating a CSS animation to mimic the fading in and out effect of the Mac scrollbar when scrolling begins

My journey begins with this: *::-webkit-scrollbar { } *::-webkit-scrollbar-button { } *::-webkit-scrollbar-track { } *::-webkit-scrollbar-track-piece { } *::-webkit-scrollbar-thumb:active { width: 6px; background-color: red; } *::-webkit-scr ...

javascripthtmlcsswebkitscrollbar

What is the best way to center this image horizontally within its variable-sized parent container?

I am currently working on a webpage that has a responsive design. The page features a list of products, with the product listing adjusting in size as the page width changes. My goal is to center the product image within its container, ensuring that the i ...

htmlcssresponsive-design

The placeholder text in the matInput field is not being displayed

As a newcomer to Angular, I am facing a challenge that has left me unable to find a solution. Below is the code snippet in question: <mat-form-field> <input matInput placeholder="ZIP" style="color:red;"> </mat-form-field& ...

javascriptangularcssangular-material

Angular-ui-bootstrap-tabs feature smooth transitions when switching between tabs, but lacks animation when moving

Just made some updates to an example by user @austin Encountering an issue when trying to transition backwards (from tab3 to tab2), but it works fine when transitioning forward. I'm not sure what I'm missing here, so any help would be appreciate ...

cssangularjsangular-ui-bootstrapangular-ui-bootstrap-tab

What causes the discrepancy in margin values between desktop and mobile devices?

In my project, I have a collection of div elements that need to be spaced vertically from one another by the height of the window plus an additional 100px. However, I encountered a discrepancy when setting this margin using jQuery between mobile and deskto ...

javascriptjquerycsswindow

What is the best way to divide a Modal Header column into two separate sections?

Is there a way to center the text in the Modal Header and have the H1 and P tags occupy one row each? Applying d-block to each creates two columns. I also tried increasing the Height in the Modal Header without success. If you have a solution, please hel ...

htmlcssbootstrap-5