Issue observed with alignment not being corrected when the browser is resized on a responsive webpage

Utilizing Bootstrap3 for my responsive page design. In the banner content, I am including a box with text inside:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <section id="slider">

    <ul class="rslides" id="modest-slider">

      <li class="slider-wrapper">

        <div class="slider-img-container">
          <img src="http://placehold.it/350x150&text=slider1" alt="slider1" />
        </div>

        <div class="slider-caption container">
          <div class="col-md-7" style="border-left-width: 4px; top: auto; bottom: 126px; width: 600px; background: rgba(255, 255, 255, 0.6); height:130px;">
            <h1>Exclusively New Concept!</h1>
            <p class="slider-description2">
              Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample...
            </p>
          </div>
        </div>
        <!-- /.slider-caption -->

      </li>
      <!-- /.slider-wrapper -->
      </ui>
  </section>

The display is correct in full screen but when resizing the browser, the alignment is off. The content box doesn't adjust properly to fit the page. Any suggestions on how to fix this issue would be highly appreciated!

htmlcsstwitter-bootstrap-3

Answer №1

Give this solution a try with some small tweaks

Demo 

/* Custom CSS styles applied after bootstrap.css */

#new-slider {
  position: relative;
}
.slider-description {
  position: absolute;
  bottom: 0;
  margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<section id="new-slider">

  <ul class="custom-slides list-unstyled" id="new-slider" stye="position:relative;">

    <li class="slider-custom">

      <div class="slider-image-wrap">
        <img src="http://placehold.it/600x300&amp;text=slider1" alt="slider1" class="img-responsive">
      </div>

      <div class="slider-description container">
        <div class="col-xs-10 col-sm-8" style="background: rgba(255, 255, 255, 0.6);">
          <h1>Brand New Idea!</h1>
          <p class="slider-desc">
            Lorem ipsum content snippet Lorem ipsum content snippet Lorem ipsum content snippet...
          </p>
        </div>
      </div>
      <!-- /.slider-description -->

    </li>
    <!-- /.slider-custom -->

  </ul>
</section>

Answer №2

Give this a shot:

<div class="row" >
<!-- adjusting width to 100% capped at 600px -->
<div class="col-md-7" style="border-left-width: 4px; top: auto; bottom: 126px; width: 100%; max-width: 600px; background: rgba(255, 255, 255, 0.6); height:130px;">
    <h1>Revolutionary New Idea!</h1>
        <p class="slider-description2">
          Lorem ipsum sample text here. 
        </p>                            
</div>

To adjust the height dynamically, consider this:

change "height:130px;" to "height: 100%; max-height: 130px;"

It's advisable to delve deeper into Bootstrap principles for better utilization.

Answer №3

It's important not to set a specific width for your div if you're working with bootstrap.

<div class="col-md-7" style="...width: 600px...

By using the col-md-7 class, you can assign a responsive width to your section in percentage. This allows the div to adjust its size when the browser window is resized. However, setting the width to 600px overrides this flexibility and creates a fixed width that doesn't adapt to changes in browser size.

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

Is it possible to consistently show the placeholder in mat-select regardless of the item currently selected?

I am looking to keep the mat-select element displaying the placeholder at all times, even if an option has been selected. Below is my HTML code: <mat-select [formControlName]="'language'" placeholder="Language"> <mat-option value=" ...

htmlangularangular-material

One way to create dynamic function parameters in JavaScript is by using

Currently, I am in the process of implementing a payment API checkout feature on my order.html page. However, I have encountered an issue where I need to add a script in the head of the HTML document. This script requires me to specify the subtotal amoun ...

javascripthtml

What effect does setting div1 to float left have on the layout of div2 in css?

Behold the mystical code written in HTML. <div id="sidebar1"> sidebar1 </div> <div id="sidebar2"> sidebar2 </div> Beneath lies the enchanting CSS code for the aforementioned HTML structure. div { width: 100px; ...

htmlcss

Troubleshooting a navigation problem with DNN and Bootstrap-3 specifically for mobile devices

Here are the steps to demonstrate this issue: 1. Visit the following page of the website: 2. Resize your browser window to mobile size and close the menu using the icon. After the animation finishes, the navigation items reappear. I have been struggling ...

csstwitter-bootstrap-3dotnetnuke

Bits of code and the internet

When it comes to displaying code on the web, there are a few key steps involved: Encoding HTML entities Formatting The most basic workflow would involve: Start with a code snippet like: <html> I'm a full page html snippet <html>. ...

javascripthtmlangularjshtml-entities

Two boxes each taking up half of the width, with content placed inside a container

How can I achieve the appearance seen in this image? The layout consists of four columns using regular Bootstrap code. The first two columns should have a white background within a .container, while the other two columns should have a black background tha ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Animate.css does not function properly when loaded locally

I'm currently using a Flask server to host an HTML file for testing purposes. Within the head of this HTML file, I have linked to a locally stored animate.min.css file (<link rel="stylesheet" type="text/css" href="{{ url_fo ...

javascripthtmljquerycssanimate.css

What is the best method to ensure a TALL table header is repeated on every page in Chrome?

First time poster =) I am currently facing an issue while trying to print a long table and have the table header repeat on each page. The problem arises when the height of the <thead> reaches a certain threshold, specifically 242px in Chrome 87.0.42 ...

htmlcssgoogle-chrome

Swiper.IO pagination indicators not displaying

Why is the pagination not showing up on the image carousel I created with Swiper? Despite being in the DOM, it has a height of 0 and manual changes have no effect. Any suggestions? import Swiper from '../../vendor/swiper.min.js'; export default ...

javascriptcssvue.jsswiper.js

Animate the smooth transition of a CSS element when it is displayed as a block using JQuery for a

I have implemented the collapsible sections code from W3 School successfully on my website. Now, I am trying to achieve a specific functionality where the "Open Section 1 Button" should slide down with a margin-top of 10px only if the first section "Open S ...

javascriptjquerycss

The JQuery sidebar smoothly transitions in after the menu button is pressed

I have been attempting to utilize the animate function in JQuery to make a sidebar menu slide in from the left after clicking a menu button. Despite searching through various resources, such as Stack Overflow, I am still unable to get it to work properly ...

jqueryhtml

What is the best way to remove <a> tags from an XML document?

I'm dealing with <a> tags within an XML file and I need to remove only the <a> tags. For instance: <test>This is a line with <a name="idp173968"></a> tags in it</test> I am unable to use str_replace to replace t ...

phphtmlregexxmlpreg-replace

Utilizing block buttons within a div containing a Bootstrap button group

My dilemma is trying to center a button group within a container while also making each button occupy half of the container's width. I've attempted using "w-50" and "btn-block," but they don't seem to work when in conjunction with "btn-group ...

cssbootstrap-4

Is there any method to ensure that IE8 properly displays opacity for a `:before` pseudo element?

Here is a simple CSS snippet that I am working with... div:before { content: "Hello there"; filter: alpha(opacity=40); -moz-opacity: .4; opacity: .4; } Check it out on jsFiddle. In Firefox 6, the :before pseudo element displays with t ...

cssinternet-explorer-8opacitypseudo-element

Keep the Bootstrap dropdown menu open when the search bar is in focus

I am working on a customized bootstrap dropdown menu that needs to remain open when the search bar within the Events dropdown is focused. I have managed to make it open and close on hover, but now I need it to stay open under certain conditions. Below is ...

javascriptjquerycsstwitter-bootstrapdrop-down-menu

What is the best way to ensure that the search box automatically adjusts its position and size regardless of the screen resolution?

I'm currently working on a responsive website project and facing an issue with the absolute positioning of the search bar on the main page, which is crucial for me. Below is the code snippet: <div class="span4"> <form class="well form ...

javascriptjqueryhtmlcss

Sidebar Text Remains Visible Despite Collapsed Sidebar

I'm working on implementing a sidebar shrink effect when collapsing it using a combination of custom CSS, jQuery, and Bootstrap. The custom CSS and jQuery handle the shrinking effect, while Bootstrap is used for styling purposes. However, I am facing ...

htmljquerycssbootstrap-5

Is there a way to implement this toolbar in Ionic Angular?

https://i.sstatic.net/sGd1o.png I am looking to replicate the toolbar shown in the image above using Ionic. As a beginner in Ionic development, I am finding it challenging to translate the design into code. I attempted to use a grid layout, but the varyin ...

javahtmlcssionic-frameworkionic4

Could you advise on the best placement for my upcoming JQuery animation?

Here is the code I am currently working with: $(function() { $("button").click(function() { $("#box1").animate({ left: $(window).width() - 800 }, { complete: function() { $("#box1").hide(); } }); $("#box2").a ...

javascripthtmljquerycss

Background positioning outside the container

Currently, I am in the process of constructing a website using wordpress. The theme has a predetermined width for all pages within a container. My goal is to confine the text within this container's width while extending the background of the <div& ...

htmlcsswordpress