CSS Bootstrap causing row height to shrink to 1px when pull-right is applied

I need a centered grid that takes up half of the screen on sm, md, and lg devices, and full screen on xs devices. Here is the current layout:

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3" >
            <a href="#" >
                <img class="img-responsive pull-right" src="/images/logo.png">
            </a>
        </div>
    </div>
</div>

This layout works fine on sm and larger devices. However, when testing it on an xs device (using Chrome simulator), the col-md-6 takes 100% width as expected but has a height of only 1px. This means the logo is visible, but the background of the col-sm-6 DIV is not visible. The issue seems to be with the pull-right class on my logo, but I'm unsure how to resolve it.

  • What am I doing wrong here?

  • Is this layout suitable for having 100% width on mobiles and 50% (centered) on other screens?

csstwitter-bootstrap

Answer №1

To prevent the div height from being just 1px on small devices, make sure to use class=col-xs-12 in accordance with the bootstrap stylesheet. Otherwise, you may need to manually set the height of the div. Refer to the following snippet for example:

Snippet:

.fr_bckgrnd {
        background: url("https://static.pexels.com/photos/1526/dark-blur-blurred-gradient.jpg");
       }
          
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      
       <style type="text/css">
       
    
       </style>
       <script type="text/javascript">
        
       </script>
       </head>
       <body>
       
       
      <div class="container">
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3 col-xs-12 fr_bckgrnd" >
            <a href="#" >
                <img class="img-responsive pull-right" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Small_Flag_of_the_United_Nations_ZP.svg/488px-Small_Flag_of_the_United_Nations_ZP.svg.png">
            </a>
        </div>
    </div>
</div>
</body>
</html>

Once you implement this code, verify in the developer tool that the width is indeed set to 100%.

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

Creating unsightly class names using Node.js

Is it possible to automatically create random and unattractive class names? For example, is there a tool or plugin that can substitute the .top-header class with something like .a9ev within my CSS code? It would also be ideal if the class name in the HTML ...

javascripthtmlcssnode.jsnpm

Firefox is blazing its own trail by rising to the top while other browsers are

Have you ever noticed that when an image becomes too large, Firefox pushes them up while other browsers push them down (which is what I prefer)? The first scenario demonstrates how Firefox handles it, the second scenario shows how other browsers handle it ...

htmlcssfirefox

Issues with Bootstrap loading correctly within a Ruby on Rails application

What steps should I take to successfully load Bootstrap 4 on my web app? Here is the contents of my Gemfile: gem 'rails', '~> 5.1.5' gem 'devise' gem 'bootstrap-sass', '~> 3.3.7' gem 'sass-rail ...

htmlcssruby-on-railsbootstrap-4

When using IE6, images may momentarily appear stretched when set to height:auto

I have set the height to auto, however I am observing that small thumbnail images are being momentarily stretched vertically in Internet Explorer 6 before adjusting to their correct height. It is worth mentioning that the image tag in the HTML appears as ...

htmlcssimageinternet-explorer-6

Embracing Divs Similar to the Grid Selector in Windows Phone

Can someone help me create square divs in HTML 5, similar to the example shown? I have written this HTML5 Code - what should I include in the CSS file to achieve the desired outcome? (If Bootstrap can be used, please provide the necessary classes instead ...

csshtml

Issue found (in promise): Invalid Syntax detected at script.js line 8, character 42

I am in the process of developing a tool that retrieves ROBLOX asset IDs using this particular API. I am utilizing the product info function through an API GET request. Despite being near completion, I keep encountering the error Uncaught (in promise) Synt ...

javascripthtmlcssroblox

Set Divs in Absolute Position Relative to Each Other

I need to create a simple navigation system using <div> elements as individual pages. The goal is to have "next" and "back" buttons that allow users to switch between these pages with a smooth fade-in and fade-out effect, all powered by jQuery. Howev ...

javascriptjquerycsspositioningslideshow

Click the button to trigger the pop-up

After creating a photo gallery using a plugin, my goal is to display this gallery when the user clicks on my homepage button. I am unsure how to make this happen and would appreciate any assistance. Below is my button code: <div class="ow-button-base ...

javascriptjqueryhtmlcss

Update your ASP.NET application to replace checkboxes with images

I have attempted the following methods, and I believe the question is pretty clear. Attempted Solution Using CSS: (Unfortunately, this approach did not work as expected and I had to resort to using a jsfiddle) .star + label{ background:url('imag ...

jquerycssasp.net

I find myself grappling with the styling issue in MUI select

<FormControl> <Select labelId="unique-label" id="unique-id" value={1} className={styles.uniqueCustomSelectRoot} IconComponent={() => <MyUniqueIcon />} sx={{ " ...

cssreactjsmaterial-uistyled-components

Bottom of the page: Bootstrap dilemma

After designing two footers, I decided to use CSS with the code position: absolute for the second footer. However, this change caused issues with the functionality of the first footer. The display now appears as follows: ...

htmlcssbootstrap-4

The bottom section is not displaying properly at the conclusion of the div slide

The division ends without displaying the footer. <div id="fullpage"> <div class="section " id="section0"> content1 </div> <div class="section " id="section0"> content1 </div> <div class="section " id="section0"> c ...

jqueryhtmlcssfullpage.js

When utilizing jQuery to retrieve the height of position:absolute elements, the script is being executed twice, resulting in inaccurate values being returned on

The issue I'm encountering with detecting the height of absolutely positioned content is demonstrated in this JSFiddle. I am working on creating a tabbed panel where users can select a room type and then a sub-type. The sub-types (ul.sub-types) are s ...

jqueryhtmlcss

moving a simulated element to a new location

Looking for some help with my html/CSS code that creates a unique element at the bottom of a div with an image background. The shape I've created is positioned at the bottom of the div... Below is the HTML: <div style="background-image:url(&apos ...

javascriptjqueryhtmlcss

Image control failing to display SVG file

I am facing an issue with displaying an SVG file on the img control in angular10. When I try to use SVG, it's not showing up but it works fine when I change the file type to jpg for the same control. The img control is placed inside a nav bar. Here i ...

htmlcssangulartwitter-bootstrapsvg

Using data-image as the source for Bootstrap Modal

I am currently working on an image gallery that utilizes the Paver jQuery plugin. The gallery is functional, but I am facing an issue where it displays the same image in the modal instead of showing the respective data-image for each image. My goal is to ...

javascriptjqueryhtmlcsstwitter-bootstrap

Utilizing JavaScript for parallax horizontal scrolling (identifying optimal 50% of screen)

I have successfully implemented this code for vertical scrolling: $('.flapleftclass').css('top',(0+(scrolled*0.5))+'px'); This method works well because I am referencing to the top position. However, when it comes to horizon ...

javascripthtmlcsswebparallax

Breadcrumb floating to the right, yet it still manages to obstruct other content, forcing it into a

Within the Breadcrumbs section, I have the path home/profile The desired layout involves floating the Breadcrumbs to the right while keeping the Other contents unfloated to the left. Ver1 -------------------- home/profile -------------------- Ot ...

cssreactjsmaterial-ui

The click event on a card is not triggering on a cloned item in the Owl Carousel 2

I have implemented owl carousel to showcase products, where each product is displayed on a card with an 'add to cart' button. However, I am facing an issue where the 'add to cart' button on a cloned item does not trigger the click event ...

htmlcssowl-carousel

What is the best method for incorporating separate CSS files for individual HTML templates within a Flask project?

I am embarking on a Flask project and want to keep things organized by having a separate css file for each html file. Most tutorials available online suggest placing all the CSS code in one /static/styles.css file. However, when I try to run the following ...

htmlcssflaskjinja2