The mobile view of the homepage slider is not appearing correctly

.main-slider-img > img{
        width: 100%;
    }
    .main-slider-content {
        left: 15%;
        margin-top: -146px;
        position: absolute;
        top: 50%;
    }
    .main-slider-content > h2{
        line-height: 50px;
        padding: 0 25px;
        background-color: #68a868;
        display: inline-block;
        text-shadow:2px 2px 0 rgba(0, 0, 0, 0.1);
    }
    .main-slider-content > h3{
        font-size: 30px;
        font-weight: 800;
        line-height: 45px;
        letter-spacing: 2px;
    }
    .main-slider-content > h3::after {
        
        position: absolute;
        bottom: -8px;
        content: " ";
        display: block;
        height: 3px;
        left: 0;
        width: 80px;
    }
    .main-slider-content a{
        line-height: 38px;
        padding: 4px 22px 0;
        color: #fff;
        border: 3px solid #fff;
        display: inline-block;
        text-decoration: none;
    }
    .main-slider-content a > i{
        margin-left: 6px; 
    }
    .main-slider-content a:hover{
        background-color: #fff;
        color: #5cb85c;
    }
    .main-slider.owl-theme .owl-controls {
        margin-top: 0;
        position: absolute;
        top: 50%;
        width: 100%;
    }
    .main-slider.owl-theme .owl-prev {
        left: 20px;
        position: absolute;
    }
    .main-slider.owl-theme .owl-next {
        right: 20px;
        position: absolute;
    }
    
    .main-slider.owl-theme .owl-controls .owl-buttons div {
        border-radius: 0;
        color: #fff;
        line-height: 88px;
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.4);
        padding: 0 10px;
        -webkit-transition: all .5s ease ;
        -moz-transition: all .5s ease ;
        -ms-transition: all .5s ease ;
        -o-transition: all .5s ease ;
        transition: all .5s ease ;
    }
    .main-slider.owl-theme .owl-controls .owl-buttons div:hover{
        background-color: rgba(92, 184, 92, 0.4);
    }
    .slide-2 {
        height: 100%;
        left: 0;
        margin-top: -90px;
        width: 100%;
    }
    .slide-2 > h3 {
        font-size: 45px;
        line-height: 55px;
    }
    .main-slider-content.slide-2 > h3:after{
        display: none;
    }
    .overlay{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(54, 54, 54, 0);
        opacity: 0.6;
    }

.main-slider-img.position-r > img{
height: auto;
}
.main-slider-content{
left: 5%;
top: 8%;
margin-top: 0;
}
.main-slider-content > h3{
font-size: 20px;
line-height: 24px;
}
.main-slider-content > h4{
line-height: 22px;
}
.slide-2{
margin-top: 0;
}
.slide-2 > h3{
font-size: 20px;
line-height: 24px;
}
<div class="container-fluid no-padding">
            <div class="main-slider">
                <div class="item">
                    <div class="main-slider-img position-r">
                        <img src="http://www.trezalliance.com/img/s1.jpg" alt="">
                        <div class="overlay"></div>
                        
                    </div>
                </div>
                <div class="item">
                    <div class="main-slider-img position-r">
                        <img src="http://www.trezalliance.com/img/s2.jpg" alt="">
                        <div class="overlay"></div>
                        
                    </div>
                </div>
            </div>
        </div>

I have encountered difficulties with my homepage slider as the responsive design seems to be off when the browser is resized or when accessed on a mobile device. Additionally, the slides do not change automatically as expected. I have invested significant time and effort in identifying and resolving these issues.

Visit my website for further insights

javascriptjqueryhtmlcss

Answer №1

Update your responsive.css by making changes to lines 10 and 346

.main-slider-img.position-r > img {
    height: 500px;
}

Change it to:

.main-slider-img.position-r > img {
    height: auto;
}

Additionally, include the following code:

@media (max-width: 767px) {
    .main-slider.owl-theme .owl-controls {
        top: 20%
    }
}

Answer №2

Here is some CSS code you can use:

.main-slider-img.position-r > img {
    height: 500px;
}

To make the image responsive, change it to:

.main-slider-img.position-r > img {
    height: auto;
}

Remember to apply this change to all your media queries.

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

Comparison of Vue CLI 3 vue.config.js and webpack.config.js in terms of handling plugins

Currently in my Vue CLI 3 setup, I'm encountering an issue with implementing the Terser Webpack Plugin to remove console.log and comments from the code. Despite following the production workflow below: Execute npm run build Run serve -s dist vue.co ...

javascriptvue.jswebpackvuejs2terser

Using the append method to call an Angular directive

Attempting to invoke an angular directive with HTML text being appended in a controller: var loadReviews = function(){ var theDiv = $("#rlist") for(var i=0; i<vm.reviewlistByUpvote.length; i++){ var review = vm.reviewlistByUpvote[i]; v ...

javascriptjqueryangularjsangularjs-directivedirective

Positioning a div inside another div using CSS

I'm having issues with a nested div causing trouble for me. <div style="border:solid 20px #ccff33;border-radius:10px;height:300px;width:300px;margin:20px;display: inline-block"> <img src="images/f35.jpg" style="margin-right:10px" /> ...

htmlcssstylespositioning

The username index is not defined in the file path C:xampphtdocsAppX1signin.php on line 6

Experiencing some challenges with a php script I recently created. As a beginner in php, I understand that my code may not be optimal. These error messages are displayed when the form is submitted: Notice: Undefined index: username in C:\xampp&bsol ...

javascriptphphtmlmysql

Library for creating custom password input fields with a text type

We are currently facing an issue on our website where autofill is not working correctly due to having two password input fields - one for login and one for the password. Browsers are unable to remember the login information and paste the password into th ...

javascriptreactjsnpmpasswordslibs

Having trouble getting the dropdown button to function properly in my Bootstrap navigation bar implementation

Can anyone help me troubleshoot why the dropdown button is not functioning in my code? I've tried following tutorials and searching for solutions online, but nothing seems to work. Any assistance would be greatly appreciated. <!DOCTYPE html> & ...

htmlcsstwitter-bootstrap-3

Personalize the Jquery datatables GET request parameters for the server by tailoring them to your preferences

I'm using Jquery datatables and would like to customize the GET request it sends to the server when loading a page, instead of the default GET request. Below is the JavaScript section where the request is sent on load: $(document).ready(function() { ...

javascriptjqueryajaxdatatablesjson-rpc

Even with the text field populated and clearly existing, Firefox is still throwing a null error when trying to retrieve it using

Hey there! I'm currently working on a sample HTML page and I'm facing an issue with retrieving data from a text field. No matter what I try, I keep encountering the following error: TypeError: document.getElementById(...) is null Let me share t ...

javascripthtml

When working with Vue, setting the default value for props as a computed property is an

props: { rules: { type: Array, required: false, default: () => [ (file) => !file || file.size < 10000000 || this.getJsonDataByLocale.less_than_10mb_message, (file) ...

javascriptvue.js

Problem encountered with cross-domain jQuery.ajax request, although it functions properly in the outdated iteration

Here is the code snippet I am using: $.ajax({ url: "http://example.com/auth", type: "POST", data: "username=example&password=mypasswd", success: function(returned) { // do something }, error: function(returned) { ...

jqueryajax

Using JavaScript to connect with the OFX Server

I'm currently working on a project that involves calling the OFX server from my Javascript file. I've been using the jQuery ajax method to make this web service call. However, when I try to call the web service, I keep encountering the following ...

javascripthtmljqueryofx

Is it possible for third party packages to function properly without the node_modules directory?

Whenever we push our code to GitHub or any other remote repository service, we make sure to exclude the node_modules folder. This begs the question: how are all the third-party libraries functioning on the hosted website if the node_modules folder is not ...

javascriptreactjs

What could be causing my js.erb file to not function properly?

Here is the code snippet I am working with: file.js.erb alert("Alert"); main.js jQuery.ajaxSetup({ 'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")} }) jQuery.fn.submitWithAjax = function() { this.submit( ...

ruby-on-railsjquery

Should PHP be avoided in CSS files?

I've recently developed a CSS page named style.php and at the beginning, I included this line: <?php header("Content-type: text/css"); ?> What are your thoughts on this approach? Is it considered a bad idea? The reason behind doing this is tha ...

phpcss

Display image URL data in a pop-up box when the button is clicked without dimming the background

In my quest to access the legend of a WMS layer in Openlayers 3, I have successfully obtained the legends of the layer. However, I aim to display them in a popup box with a movable and close button. Below is the content of the .html page: <label>&l ...

javascriptjqueryhtmlopenlayers-3

AngularJS ng-model directive binds an input field with a specific value

I encounter a challenge where my inputs, containing values, do not display the value when I apply an ng-model to each input field. Below is the snippet of my code: student-list.html <!--edit form--> <div class="col s12" ng-show="dataForm"> ...

javascriptangularjs

Customize Bootstrap 3 Carousel with navigation buttons

I am currently learning how to use Bootstrap 3 and I am in the process of creating a Carousel for my website. My goal is to design a carousel with a "fade" effect along with four buttons below it that, when clicked, will trigger the transition between imag ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Using incorrect string as JavaScript argument

Currently, I am facing an issue with passing parameters elegantly in my code. I have a link for deleting items which looks like this: <a href="javascript:confirmDelete('${result.headline}', ${result.id});"> The problem occurs when the res ...

javascriptjstl

Having issues with the submit button functionality on Laravel Crud when employing Ajax and jQuery

I have been experiencing an issue with submitting the form after completing all the fields. Despite filling out the form and trying to submit it, I am not able to do so and there are no error messages appearing in the console or network tab either. Here i ...

phpjqueryajaxlaravelcrud

Assistance needed in regards to relative positioning

I am working on a feature where the customer's shopping cart is displayed when they hover over "My Cart." I plan to achieve this effect using CSS, but I have encountered an issue with the size of .cart causing .my-cart to stretch... update The previ ...

csscross-browser