elements of bootstrap overlapping one another

I have created a website using Bootstrap, which can be accessed at this link.

The homepage is experiencing alignment issues, with sections colliding with each other. To prevent this collision, I had to add margin-top like the example below:

<section class="ds gallery-3 s-py-70 s-py-lg-100 s-py-xl-150" id="chinnu1" style="margin-top:80%">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <h4 class="big-title" style="text-align:center">
                            OUR SERVICES
                        </h4>
                    </div>
                </div>
            </div>

I had to manually adjust the margin-top for all sections to avoid collision. However, the problem reoccurs after some time, requiring me to readjust the margins again. Can someone suggest a permanent solution for fixing this issue?

htmlcssbootstrap-4sections

Answer №1

After thoroughly reviewing your website, I have identified the issue causing problems. It's not the margin as initially thought, but rather the owl carousels. Their absolute positioning is causing them to overlap other elements on the page.

    section.carousel-section .container-fluid {
        overflow: hidden;
        position: absolute;
    }

To resolve this, simply change the positioning to relative;

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

Determine the number of rows in the Tabulator's table

Can anyone tell me how to retrieve the number of rows in a table created using Tabulator on a website? Is there a method like table.size or table.length that I can use for this purpose? The table has been initialized with the following code: table = new T ...

javascripthtmlcssjsontabulator

Add the component view to the webpage's body section

Using Angular 7 and ngx-bootstrap 4.0.1 Dependencies: "bootstrap": "3.3.7", "bootstrap-colorpicker": "2.5.1", "bootstrap-duallistbox": "3.0.6", "bootstrap-markdown": "2.10.0", "bootstrap-progressbar": "0.9.0", "bootstrap-slider": "9.8.0", "bootstrap-tags ...

javascripthtmlangularangular7

Adjust the class based on the model's value in AngularJS

items = {'apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'} html <div class="variable" ng-repeat="item in items">{{item}} </div> ...

javascriptcssangularjsangularjs-ng-repeat

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

Help with Crafting Responsive CSS Design

I am seeking help to better comprehend the concept of responsive design through this question. Let's imagine a header on a standard desktop screen. Within that, I have a div element containing the information I wish to showcase. .hdrinfo{ width: ...

cssresponsive-designmedia-queries

Changing the appearance of a shadow root element using CSS styling

My CustomField has a FormLayout inside, and I want to change the #layout element within the shadow-root. While it can be done with JavaScript: document.querySelector("#myid > vaadin-form-layout") .shadowRoot .querySelector("#layout" ...

cssvaadinvaadin-flow

Ways to minimize excessive gap between two columns in Bootstrap

How can I reduce the space between two form-groups without moving the email address field with CSS left margins? When I try to make the first column smaller, it automatically wraps to the next line, but I want the email address to be closer to the phone ex ...

htmlcsstwitter-bootstrap

Optimize HTML outputs in Smarty by reducing the file size

Is there a way to minify all output HTML templates in Smarty automatically? Would it be possible to set something like this: $smarty->minify = true; Additionally, I have come across the {strip} function but using it in every single .tpl file is not fe ...

htmlcompressionsmartyminify

Align the middle element in a dynamic row

There is a row consisting of three elements: left, center, and right. However, the problem lies in the fact that the center element is not aligned at the screen level, but rather at the row level. Is there a solution to align this element at the screen l ...

htmlcsstwitter-bootstrapbootstrap-4

Show the list in a circular buffer fashion

I am working on a project that involves creating a unique UI element. In Frame #2 of my professionally designed diagram, I envision a list that functions as a ring buffer/rolodex when it exceeds four items. The list would scroll in a loop with the top and ...

javascripthtmlcss

Preventing a user with the same name as the one in the table from being added by utilizing a jQuery contains check proved

Check out my fiddle here: http://jsfiddle.net/jd5pgdz2/4/ I encountered an issue when attempting to add a user with the same name as one already in my table (the displayed users are static in the HTML). Despite using 'contains' to check if the u ...

jqueryhtml

What are the steps for implementing this javascript code in an HTML document?

Recently, I've been seeking advice on how to address the issue of wanting a button click to automatically select the search box on my website. Suggestions have pointed towards using Javascript for this functionality, with the following code recommend ...

javascriptjqueryhtml

Table Dimensions Dream Weaver

After creating a basic PHP webpage using Dream Weaver CS5 Version 11.0 Build 4964, I encountered an issue. My webpage is structured with a table containing 10 rows, each row consisting of a single cell. Within each table cell, there is a nested table tha ...

phphtmlcsshtml-tabledreamweaver

Discover the method to adjust the position of elements, such as images, using radio buttons

I have an image positioned in a container along with 3 radio buttons. I want to make additional images appear over the main image when specific radio buttons are selected. Each button will trigger different positions for the additional images. So far, thi ...

javascriptjqueryhtmlcss

What is the best way to include a JavaScript variable in an HTML image src tag?

Even though I know the answer to this question is out there somewhere, I just can't seem to find it (or maybe I'm not recognizing it when I see it!). As a beginner in jquery, please be patient with me. Dilemma: I have a collection of 20 images, ...

javascriptjqueryhtmlimagerandom

Using jQuery or Javascript to enclose every character in a given string with an HTML tag

I am trying to create a function that can take a string of text and wrap each letter within that string with an HTML tag such as <i> or <span>. Although I have made some progress, the current solution is not working as expected. The issue I a ...

javascripthtmljquerycsssplit

Discovering the present width of an Angular element after it has been eliminated

Imagine you have a horizontal navigation bar coded as follows: HTML: <ul> <li ng-repeat="navItem in totalNavItems">{{name}}</li> </ul> CSS: ul, li { display: inline-block; } The data for the navigation items is fetched from thi ...

javascriptjqueryhtmlangularjs

Error: jQuery Datatables Library encounters an issue with undefined variable "oColumn"

I'm encountering an issue with implementing the jQuery Datatables library on my Joomla website's table. The script partially styles the table, but then stops (changing header and text colors, but missing datatables controls). http://datatables.ne ...

phpjqueryhtmldatatableshtml-table

When switching between classes, it is not possible to apply a different value to the same CSS property

I am currently working on a project that involves toggling a class on a ul tag with an id of sideNav using JavaScript. In this scenario, I have set the left attribute of the id to 0, while the same attribute in the class has a value of -100%. After sever ...

javascripthtmlcss

Display a text box upon clicking an item

I've been curious about how to create the effect of a text box or div that appears when clicked on, similar to what you see in this. Scroll down and click on "show patchnotes"; I've been puzzled by this for a while but haven't come across a ...

javascriptjqueryhtml