Responsive on Mobile Devices

I'm seeking assistance in brainstorming a creative idea or method to convert the carousel indicators into a menu, or any alternative approach to ensure the entire section is mobile responsive while keeping all the indicators visible within the mobile width. I've attempted various methods that didn't yield the desired results. As someone new to programming, I aimed to challenge myself but encountered difficulties in achieving responsiveness. Upon running the code, it's evident that Day 1 is not visible and Day 8 overlaps with other elements. I would greatly appreciate a solution for the project I'm working on.

h1,
h2,
h3,
h4,
h5,
h6 {}

a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  outline: none;
}

a,
a:active,
a:focus {
  color: #333;
  text-decoration: none;
  transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-duration: .2s;
  -ms-transition-duration: .2s;
  -moz-transition-duration: .2s;
  -webkit-transition-duration: .2s;
  -o-transition-duration: .2s;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

span,
a,
a:hover {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}


/*==========================
      history area
===========================*/

.section-title,
.column-title {
  font-size: 36px;
  font-weight: 300;
  color: #101010;
  margin-bottom: 70px;
}

.section-title span,
.column-title span {
  font-weight: 700;
}

.title-small {
  font-size: 30px;
  font-weight: 700;
}

.column-title {
  margin-bottom: 30px;
}

.column-title-large {
  font-size: 48px;
  margin-bottom: 50px;
}

.ts-title {
  font-size: 24px;
  font-weight: 600;
}

.title-light {
  font-weight: 300;
}

.title-small-regular {
  font-weight: 400;
}

.black-color {
  color: #101010 !important;
}

.title-white {
  color: #fff;
}

.title-bg-small {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 15px;
  color: #fff;
  background: #101010;
  display: inline-block;
  padding: 3px 18px;
  text-transform: uppercase;
}

.primary-bg {
  background: #e80000;
}

.history-area {
  background: #f7f9fb;
  padding: 100px 0;
  position: relative;
  min-height: 100vh;
}

#history-slid .history-content {
  background: #fff;
  padding: 35px;
  padding-left: 14px;
}

#history-slid .carousel-inner {
  margin-bottom: 45px;
}

#history-slid .carousel-item {
  background: #fff;
}

#history-slid .carousel-indicators {
  position: relative;
  left: 0%;
  z-index: 5;
  width: 100%;
  padding-left: 0;
  margin-left: 0%;
  text-align: center;
  list-style: none;
}

#history-slid .carousel-indicators:before {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  top: 15px;
  background-color: #ddd;
  z-index: -1;
}

#history-slid .carousel-indicators li {
  display: inline-block;
  width: 70px;
  height: 35px;
  line-height: 35px;
  margin: 0 35px;
  text-indent: 0px;
  cursor: pointer;
  color: #101010;
  border: 0px solid #fff;
  border-radius: 0px;
  margin-top: 40px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

#history-slid .carousel-indicators li:before {
  position: absolute;
  top: -30px;
  left: 50%;
  display: inline-block;
  width: 12px;
  height: 12px;
  content: "";
  border-radius: 50%;
  background: #101010;
  margin-left: -7px;
}

#history-slid .carousel-indicators li.active {
  line-height: 35px;
  -webkit-box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.15);
  color: #e80000;
  background: #fff;
}

#history-slid .carousel-indicators li.active::before {
  background: #e80000;
}

#history-slid .carousel-indicators li.active:after {
  position: absolute;
  top: -34px;
  left: 44%;
  display: inline-block;
  width: 20px;
  height: 20px;
  content: "";
  border-radius: 50%;
  margin-left: -7px;
  border: 1px solid #e80000;
}

#history-slid .carousel-item-next,
#history-slid .carousel-item-prev,
#history-slid .carousel-item.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">


<section class="history-area">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <p class="title-bg-small wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="300ms">Beach Trip</p>
        <h3 class="section-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="400ms">Our
          <span>Itinerary</span></h3>
      </div>
      <!-- end col -->
    </div>
    <!-- end row -->
    <div class="row">
      <div class="col-lg-12">
        <div id="history-slid" class="carousel slide" data-ride="carousel" data-interval="false">
          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="carousel-item row">
              <div class="col-lg-6 col-md-12 pl-0">
                <div class="history-img">
                  <img class="img-fluid" src="https://i.ibb.co/CKNmhMX/blog1.jpg" alt="" />
                </div>
              </div>
              <div class="col-lg-6 col-md-12 pr-0">
                <div class="history-content">
                  <p class="title-bg-small primary-bg wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="500ms">
                    Lorem ipsum</p>
                  <h2 class="column-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="700ms">Lorem ipsum dolor <span>sit amet</span></h2>
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                  </p>
                  <p>
                    Benefit of the socie where we operate. A success website obusly needs great design to be one of the top 10 IT companies in India but the web design is not enough.
                  </p>
                </div>
              </div>
            </div>
            <!-- End off item-->
            <div class="carousel-item row">
              <div class="col-lg-6 col-md-12 pl-0">
                <div class="history-img">
                  <img class="img-fluid" src="https://i.ibb.co/m5yGbdR/blog2.jpg" alt="" />
                </div>
              </div>
              <div class="col-lg-6 col-md-12 pr-0">
                <div class="history-content">
                  <p class="title-bg-small primary-bg wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="500ms">
                    ...

Thank you!

htmlcss

Answer №1

All you have to do is update the list display setting to flex in order to achieve the desired layout.

@media screen and (max-width:990px){   
 .carousel-indicators{
    display:flex;
    flex-wrap:wrap;
    }
}

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

Saving and retrieving user input as a variable using Javascript and HTML local storage

This is the foundation of my HTML page. When the "remember text" paragraph is clicked, the data in the input text box is saved to local storage as a string. Clicking the "recall text" paragraph loads the stored data into the "recalled text" paragraph. I am ...

javascriptandroidhtmlcordovalocal-storage

Move the absolute div by sliding it to the left from 120% to -10px

I want to move an absolute positioned div from the left side of the screen to -10px on button click. Here's my attempt so far, but it's not working as expected. Javascript/jQuery $('.button').click(function() { $(this).parent().f ...

javascriptjqueryhtmlcss

Ways to optimize the spacing between the menu bar and widgets

I have successfully incorporated multiple images side by side on my blog Following is the code used for this layout: <div class="images"> <figure> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSA7XLfGrT1rMS-Ifoguz-X2igsT ...

htmlcsscss-floatblogger

Utilize Javascript to Populate Form Fields Based on "Selected Name"

I am currently facing a challenge in using javascript to automatically populate a form, specifically when it comes to setting the value for the country field. <form action="/payment" method="post" novalidate=""> <div class="input_group"> ...

javascripthtml

Customizing the size of dateBox icons in JQuery Mobile

Is there a way to increase the button size within the input box of a dateBox? Currently, it appears small and difficult to click accurately. Additionally, it would be beneficial if clicking anywhere in the input field could open the calendar, instead of ju ...

jqueryhtmljquery-mobile

Submitting data and files simultaneously to Ajax using Laravel

As I work on enhancing my registration page with Bootstrap Modal, I need to allow users to upload their image along with other information. HTML <form method="POST"> <center> <img name="user_image" id="proPic" src="ima ...

phpjqueryhtmlajaxlaravel

Are there any jQuery plugins available that animate elements as the page is scrolled?

Looking for a library that can create entry animations for elements as the page is scrolled? I previously used the animate it library, which was great - lightweight and easy to use. However, it doesn't seem compatible with the latest jQuery version (3 ...

javascriptjquerycssanimation

The Font Awesome icons do not display offline

I'm having trouble using Font Awesome icons offline on my webpage. I've included the necessary code, but for some reason it's not working. Here is what I have: <html> <head> <title>font-awesome example</title> ...

htmlcssfont-awesome

Retrieve content from inner tag using Selenium

Check out this snippet of HTML code: <label class="abc"> <span class="bcd">Text1</span> Text2 </label> Is there a more efficient method to extract only Text2 using a selenium script? I currently extract Text2 by accessing the ...

javahtmlselenium

Guide to swapping images using HTML forms and JavaScript

I have been attempting to create an image swapping code using a form with two drop-down options. The options are for color choices for an item, in this case, let's call it a widget, with both exterior and interior colors. I have been brainstorming on ...

javascriptjqueryhtml

Fade out a dynamically loaded content block using jQuery

I am currently developing a small app and encountering issues with deleting (fading out) dynamically loaded div elements using jQuery. The problem occurs when adding a new content box. If the page is reloaded and the content box is rendered normally (from ...

javascriptphpjquerycssajax

How to Make Your Site/Content Fade In with jQuery Upon Loading?

Is there a way to add a fade-in effect to a website once it has finished loading, in order to avoid any sudden changes and ensure that the content appears smoothly? It might be simpler if the fading effect is applied only to certain sections, such as head ...

jqueryhtmljquery-pluginsloadfade

I require a breakdown of the JavaScript code, please

Are you struggling with a code snippet that involves CSS, JavaScript, and HTML? Let's take a look at the complete code: <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="http://snipplicious.com/css/bo ...

javascriptjqueryhtmlcss

Alternative background for browsers that do not have support for border-image styling

I am experimenting with CSS3 border-image to create a simple button design: the left slice of the image is intended to be the left border of the text, the right slice as the right border, and the middle slice should either repeat or stretch as a background ...

fallbackcss

Avoiding the utilization of HTML forms

Is it acceptable to send form information using jQuery instead of creating an HTML form? By skipping the traditional HTML form and using $.ajax in jQuery, are there any security, performance, or semantic issues to be concerned about? Does this approach a ...

javascriptjqueryhtmlforms

A missing semicolon is encountered while compiling a React application

I am currently working on my app using Create React App and incorporating scss. I have used a vscode plugin to convert the scss to css, but I keep encountering an error when running npm run build. The error message reads as follows: [email protected ...

cssreactjssassbuild

MySQL Entry Update Failure

This is the HTML/EJS code snippet: <div class="Edit-Panel" style="display: none;"> <div class="Edit-Wrapper"> <div class="Editing"> <p class="Edit-Header ...

javascripthtmlsqlnode.jsejs

The issue with CSS z-index not functioning properly when using absolute positioning

Here is the issue I'm facing: I have multiple div containers in my code. .outer { position: relative; z-index: 1; } .inner { position: absolute; z-index: 999; } <div class="outer"> <div class="inner"> <div class="option ...

htmlcsspositionz-index

Issue with displaying multiple checkboxes using Materialize CSS in combination with Leaflet for web-mapping overlays

I'm currently using Materialize 0.97.7 along with Leaflet 1.0.1 (the latest version). <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet-src.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com ...

javascriptcssleafletmaterialize

Ways to incorporate a dictionary into your website's content

I am in the process of developing a website for educational purposes while also honing my web programming skills. On this website, I have encountered some complicated terms that may be difficult for users to understand, so I want to implement a tooltip/mod ...

javascripthtmlcssnode.jsjson