Shrink or vanish: Creating a responsive header image with Bootstrap

Looking to create a dynamic header with different sections such as headerright, headercenter, and headerleft, each with unique content.

I've successfully added an image to the header, but when I resize the page or view it on a mobile browser, the image either shrinks to a tiny dot or disappears completely.

Here is my HTML/CSS code: visit www.jsfiddle.net/9118jw4s - although the preview may not be helpful since it only displays the full-size image.

Can someone offer assistance or direct me to a tutorial on creating a responsive header with images using bootstrap? Thank you.

jqueryhtmlcsstwitter-bootstrap

Answer №1

It appears that the padding settings in your #header-container may be causing your image to shrink when resizing. Consider these alternatives:

 #header-container {
    margin:auto;
  }

or

 #header-container {
    padding-left:15%;
    padding-right:15%;
  }

I also noticed a typo in your .headerleft= "mind-width"

Instead of using pixels for padding sizes, try using percentages. This could make a difference. Hope this advice proves helpful!

Answer №2

When using bootstrap, you can easily make images responsive by adding the class ".img-responsive"...

.headerbox {
  height: 200px;
  width: 100%;
  background-color: white;
}

#header-container {
  padding-left: 140px;
  padding-right: 140px;
}

.headerdiv {
  height: 200px;
  width: 100%;
  padding-top: 17px;
  padding-bottom: 17px;
  padding-left: 65px;
  padding-right: 65px;
}

.headerleft {
  height: 146px;
  min-width: 50%;
  width: 50%;
  float: left;
  padding-right: 15px;
  background-position: center left;
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header">
  <div id="header-container" class="container">
    <div class="headerdiv">
      <a href="" class="headerleft">
        <img src="http://s7.postimg.org/ixxfw8n5n/header_logo.jpg" class="img-responsive" alt="header SUSU logo">
      </a>
    </div>

  </div>
</div>

Answer №3

To make your website responsive, consider adding a background image to the body element.

 body {
      background: url(background.jpg) no-repeat;
      width: 100%;
      height: 100%;
      background-size: contain;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover; 
      background-position: top;
      background-size: auto;           
    }

This simple adjustment will help ensure that your site adjusts well on different devices.

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 having trouble selecting Bootstrap radio buttons on my ASP.NET Core MVC application

My asp.net mvc core web application has the following code to display 2 radio buttons:- <div class="form-group"> <label class="control-label" style="font-weight:bold"> ...

htmlasp.net-corebootstrap-4asp.net-core-mvcradio-button

"Discovering the data-id of an active class is essential - here

<ul class="deal-menu"> <li class="active" data-id="today-spl"><a href="#" class="first">Special<span class="active"></span></a></li> <li class="" data-id="today-deal"><a href="#">Deal</a>< ...

jquery

Styling Lists in HTML/CSS: How to Highlight an Entire Row with a Background Color When Using list-style?

I've been working on revamping the menu layout on my website. Currently, I am using a list with a circle style type to display the menu options. Here's a glimpse: Here is the code snippet: <li class='category'><a href=' ...

htmlcsshtml-listsstyling

Create a unique design using two vertical sections with Bootstrap 5

I have been grappling with this issue for the past day, and I would greatly appreciate any assistance I can get! I am attempting to achieve a design similar to this using Bootstrap 5. Here is the goal I am aiming for While I have a good handle on creating ...

htmlbootstrap-5

What is the best way to modify an image in a column when I hover over a table row that was dynamically inserted using a button function?

Is there a way to dynamically change an image in a column when hovering over a table row that was added through a button function? Here is the current code that I am using, but it does not seem to work as intended when I hover over the row. This function ...

javascriptjqueryhtmlcssweb

Tips for adding text to your d3 force layout

Looking to incorporate text into a force layout using SVG. I've created an svg group and added a circle successfully, but having trouble with the text. Here's the code snippet: var node = svg.selectAll("g") .data(measures.nod ...

javascriptjqueryd3.jssvg

Modifying HTML code within a WebView (Monodroid) explained

WebView webView = FindViewById<WebView>(Resource.Id.webView1); webView.HorizontalScrollBarEnabled = false; webView.LoadUrl("res.htm"); I am looking for a way to modify certain parts of HTML code in my file and display it using webView without actual ...

c#androidhtmlxamarin.android

The hierarchy of CSS in Vue components

I've developed a customized CSS framework to streamline the design process across all my internal projects. The central file is structured as shown below: @import "~normalize.css/normalize.css"; @import "_variables.scss"; @import "_mixins.scss" ...

htmlcssvue.js

Ensure that when a user clicks back on an image popup, the page stays in its current position

Is there a way to ensure that after closing a popup image, the browser returns to the same position where it was before? Currently, when I close the popup image, the page scrolls back to the top (as indicated by the red square in the example). However, I ...

htmlcss

Tips on using Jquery to animate an element to a specific pixel measurement

My expertise lies in executing the following code: $("#nurseView").animate({"left": "+=100px"}, "slow"); However, I am facing a dilemma. How can I animate an object to exactly 1576px on the X-axis regardless of its current position? The code snippet abov ...

javascriptjqueryhtml

The basic AJAX does not seem to be functioning

Exploring the world of ajax, I'm having trouble with the following code: $(document).ready(function() { $("button").click(function() { $.post("\tests\test1.php", function(data) { alert(data) }); }) }) <script src="htt ...

jqueryajax

Ways to customize the border of the ListItemButton when it's in a selected state using Material UI?

I'm currently working on a feature that involves highlighting a ListItemButton with a specific background color when selected. However, I now want to take it a step further and add an outline or border color around the ListItemButton when it is select ...

cssreactjsbuttonmaterial-uilistitem

Shifting the image below the text for mobile display

My goal is to place an image below a block of text when viewed on a mobile device, but currently, the image is covering the text. Here is how it appears on desktop: [![enter image description here][1]][1] This is the current mobile view (the image is ov ...

htmlcss

Sending a string to the server-side using Jquery Ajax

Is there a way to send variable data to the server side? I am looking for a solution. $("form").submit(function () { GetSelectedValues(); }); function GetSelectedValues() { var data = $("#DDL_WorkCategory").val(); } This ...

javascriptjqueryasp.netajax

Special html effects for scrolling

Recently, I've been noticing a trend of websites incorporating new and innovative scrolling effects. One great example is: As you scroll down the page, the initial section stays fixed in place (z-index of 1?) while the content scrolls over it seamles ...

htmlcssfragment-identifier

Error encountered while using the getJSON code syntax

Is there an issue with this code snippet? I am receiving a syntax error on line 1: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Demo</title> </head> <body> <script src="http:/ ...

javascriptjquerygetjson

Ensure that every HTML link consistently triggers the Complete Action With prompt on Android devices

After extensive searching, I have yet to find a solution to my issue. I have been developing a web application that allows users to play video files, primarily in the mp4 format. Depending on the mobile browser being used, when clicking the link, the vide ...

javascriptphpandroidhtmlonchange

changing pictures with jquery

Struggling with this code snippet: $('#clicked_package').css({"background-image" : "url(img/head_2.png)"}).fadeOut("slow"); $('#clicked_package').css({"background-image" : "url(img/head_2_normal.png)"}).fadeIn("slow"); No matter which ...

javascriptjquerycss

Tips for updating text in a freshly opened window using JQuery or JavaScript

I have a function that is triggered by a button click to open a new window or tab, display an alert, and update text. Here is the code snippet: function nWin(p) { var setStyle = "<style rel='stylesheet'>\ .vTop {\ ...

javascriptjqueryhtmlcss

Switching Unicode icon when element is clicked

My form has two inputs - one for text input and the other for submitting, like a button. I have added an icon to the submit button and want it to change when clicked. <input class="searchBtn" id="submit" name="submit" type="submit" value="&#xf002"& ...

javascriptjqueryhtmlfont-awesome