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

Having trouble transmitting data from the View to the Controller

Need help with this issue. I'm having trouble passing my data to the controller. Below is my ajax code. <script type="text/javascript"> $(document).on("click", "#login_button", function () { var userName = document.getElementById(" ...

javascriptc#jqueryajaxasp.net-mvc

Pressing the Add button will create a brand new Textarea

Is it possible for the "Add" button to create a new textarea in the form? I've been searching all day but haven't found any logic to make the "Add" function that generates a new textarea. h1,h2,h3,h4,h5,p,table {font-family: Calibri;} .content ...

javascriptjquery

Having trouble retrieving JSON values from the AJAX success function in my CodeIgniter application

Hey everyone, I'm facing a simple error that's giving me a hard time. No matter what I do, I can't seem to access the JSON values in my code. Whenever I try to alert after parsing the JSON, it just shows me 'undefined'. Can anyone ...

phpjqueryjsonajaxcodeigniter

Jquery Autocomplete with Dynamic Text Updates

I am having an issue with the autocomplete feature on my website. Whenever I enter a search and select an option, the text in the box changes to the selected value instead of keeping what I originally entered. How can I prevent this from happening? <sc ...

jqueryajaxautocomplete

Having difficulty altering the font in the WordPress tinymce editor

I've been attempting to update the font in the WordPress tinymce editor, but I'm running into issues. First, I created a tinymce-custom-editor.css file with the following code: @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,7 ...

phpcsswordpresstinymce

What is the process for accessing my PayPal Sandbox account?

I'm having trouble logging into my SandBox Account since they updated the menu. The old steps mentioned in this post Can't login to paypal sandbox no longer seem to work. Could someone please provide me with detailed, step-by-step instructions o ...

javascripthtmltypescriptpaypale-commerce

Column Alignment Problem in Bootstrap

I'm currently working on a blog template project that resembles the design of this particular page However, I've encountered an issue with aligning the grids in a way that meets my requirements. To showcase my problem, I have shared my version o ...

htmlcssresponsive-designbootstrap-4web-frontend

Problems with radio button serialization in jQuery form plugin

I've created a basic form: <form class="dataform" method="post" id="settings" action="/"> <input type="radio" name="shareSetting" value="n"/> <input type="radio" name="shareSetting" value="y"/> <input type="button" na ...

javascriptjqueryajaxinternet-explorer

Dynamic styles object for React components with inline styles

I have a styles object let styles = { step_div:{ height:'150px', } } I'm trying to display multiple div elements with different colors using React class Layout extends React.Component{ constructor(props) { super(props); ...

javascripthtmlcssreactjsinline

Tips for achieving horizontal alignment of headers

My webpage has two headers positioned as 'CompanyName' on the top left and 'Date' at the top middle but I am struggling to align them horizontally. I attempted to enclose them inside a div element, however, this did not work. Can someon ...

htmlcssasp.net-mvc

Prevent web browsers from interpreting media queries

Creating a responsive website has been challenging, especially when it comes to accommodating IE7. I'm considering turning off ALL media queries for just IE7 while maintaining the styling and layout in desktop mode. Is this possible? ...

htmlcssinternet-explorer-7responsive-design

To style the input box, apply the CSS properties "filter: alpha(opacity=70);" and "background-image: url(image.png);"

Individual functionality for both the form and css has been achieved, but when trying to implement them together, they do not work as intended. This integration is specifically for a windows sidebar gadget. Here is the structure of the form: <form nam ...

javascriptcssfilterbackground-imageopacity

Looking for assistance with CSS border animation

Below is my code snippet: .section-one { position: relative; background: #ffffff; } .section-one h2 { color: #000000; font-size: 32px; margin: 0px 0px 10px 0px; padding: 0px; font-family: "AzoSans-Medium"; } ... /* ...

htmlcss

What is the best way to customize the appearance of a toggle switch using useStyles in Material UI, rather than withStyles?

I need help with customizing the styling of an input form switch in Material UI. I want the track and button to turn red when the switch is on, similar to this example. I have tried using the withStyles method following examples on the Material UI website, ...

cssreactjsmaterial-ui

The model name should not be overridden if it is already being used in different fields

I have a model that I am binding on two sides. The first side is inside an html p tag, and the second side is a textarea. When I make changes to the textarea, the content inside the p tag also changes. How can I ensure that only the content in the textar ...

htmlangularjsdata-binding

"Please provide a correct time" when working with Django TimeField using the django-bootstrap3-datetime package

Encountering time validation issues while submitting a form using Django Bootstrap datetime picker. Upon submission, receiving an error message stating "Enter a valid time." models.py: class Appointment(models.Model): date = models.DateField() ti ...

pythondjangotwitter-bootstrapdjango-modelsdjango-forms

Creating a design where the divs on the sides utilize all the available space using only CSS and HTML

I am trying to create a layout with three <div> elements - one centered at 960px width, and the other two on each side. My goal is to have the side divs take up all available space except for the 960px occupied by the centered div. I managed to achi ...

htmlcss

Stopping errors are a common occurrence in synchronous AJAX

I recently encountered an issue with my AJAX request setup. In the success callback function, I called a new function to render Google links and made another AJAX call. To address some performance concerns, I attempted to change these asynchronous calls t ...

javascriptjqueryajax

The app is opening the index.html file instead of the expected index.jsx file

After creating a page with React.jsx, I encountered an issue where my page was initially opening index.jsx upon running npm start. However, when I deleted and then restored the index.html file to "public", the page started opening index.html instead. This ...

htmlreactjsnpmjsxdelete-file

Looking for ways to incorporate both external and internal styling using jQuery and CSS in my template?

I've been working on a django project for a while now, and I'm facing some challenges with getting external and internal CSS to work. Only inline CSS seems to be functioning properly. I have two questions: How can I get external or internal C ...

jqueryhtmlcssdjangodjango-crispy-forms