Ways to adjust the distance between logo and slider

I am using this script to showcase some products. You can find the script at: http://tympanus.net/Tutorials/ItemSlider/

When resizing the web browser from maximum size to smaller, I find that the height between the logo and shoes is too large for my liking. How can I adjust this?

style.css

@import url('demo.css');

.mi-slider {
    position: relative;
    margin-top: 30px;
    height: 490px;
}
...

demo.css

/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,900);
...

and the html

<div class="container"> 
            <!-- Codrops top bar -->
            ...
        </div><!-- /container -->
        ...

Upon looking into it, I'm unsure of what specific elements need modification. Any guidance would be greatly appreciated. Thank you for your assistance.

Kind regards!

Answer №1

When it comes to small width screens or mobile devices, the media queries section in CSS is responsible for handling the styling. You can find this particular section at Line #328

/* Media Queries */
@media screen and (max-width: 910px){
    .mi-slider nav {
        max-width: 90%;
    }
    .mi-slider nav a {
        font-size: 12px;
        padding: 40px 10px 30px 14px;
    }
}

@media screen and (max-width: 740px){
    .mi-slider {
        height: 300px;
    }
    .mi-slider nav {
        top: 220px;
    }
}

@media screen and (max-width: 490px){ 
    .mi-slider {
        text-align: center;
        height: auto;
    }

    .mi-slider ul {
        position: relative;
        display: inline;
        bottom: auto;
        pointer-events: auto;
    }

    .mi-slider ul li {
        -webkit-animation: none !important;
        -moz-animation: none !important;
        animation: none !important;
        -webkit-transform: translateX(0) !important;
        -moz-transform: translateX(0) !important;
        transform: translateX(0) !important;
        padding: 10px 3px;
        min-width: 140px;
    }

    .mi-slider nav {
        display: none;
    }
}

Answer №2

To properly position .mi-slider ul, consider aligning it to the top instead of the bottom.

Answer №3

Implementing a media query is essential

@media only screen and (width:1200px){
    .mi-slider ul li a,.mi-slider ul li h4{
        font-size:10px;
    }
}

Try something similar. Find more information here.

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

What are the best methods for extracting real-time data from Yahoo Finance streaming services?

Yahoo finance streaming employs a unique method where a file gradually grows in size to continually update their data: ^FTSE Is there a way for me to gather this data (I have no intention of selling it- just looking to create my own beginner trading dash ...

Angular does not display results when using InnerHtml

I'm currently in the process of creating a weather application with Angular, where I need to display different icons based on the weather data received. To achieve this functionality, I have developed a function that determines the appropriate icon to ...

Remove numerous entries from the WordPress database by selecting multiple checkboxes

A new customer table named "tblvessel" has been created in the Wordpress database. The code provided below selects records from the database and displays them as a table with checkboxes next to each record, assigning the record's 'ID' to the ...

Having trouble with submitting the code - need help resolving the issue

I'm facing an issue with my submit cancel code. The JavaScript code I implemented for preventing the submission function on my page isn't working as expected. While it does work to a certain extent, it's not fully functional. I am seeking a ...

Issue with VueJS where the datalist input does not reset the value

I am currently working on a Vue component that scans QR codes and adds information to a database upon successful scanning. The scanning process works perfectly fine. However, after successfully sending the data, I need to clear the input field in my datali ...

The styles for the React calendar are not being properly applied to the calendar component due to CSS overriding

Having trouble overriding the default Calendar.css file in NextJS while creating a calendar component. Even after adding my own custom styles, they aren't being applied. Deleting the css file contents doesn't change the format either. Only when c ...

What is causing my file input to duplicate and send the image twice?

I am facing an issue with my Ajax script that displays images sent by the admin to clients. The problem is, every time the admin uploads a new image, the script duplicates and sends the image twice. For example, if the admin uploads the first image, it sho ...

Unlimited scrolling feature on a pre-filled div container

Looking for a way to implement infinite scroll on a div with a large amount of data but struggling to find the right solution? I've tried various jQuery scripts like JScroll, MetaFizzy Infinite Scroll, and more that I found through Google search. Whi ...

The jQuery ajax function is malfunctioning when set to synchronous mode

Can you help me with this code? I am trying to make a successful $.ajax call and return its response as the result of function a(). However, before the response from the ajax call is ready, it is returning an empty result. Any assistance would be appreci ...

The Kendo UI Combobox triggering the change event twice

After noticing some strange behavior in all the comboboxes within my application, I realized that the Kendo UI ComboBoxes were triggering the change event twice, resulting in two HTTP requests being made when the code inside only required one. Despite cond ...

Leveraging concealed input for transmitting additional information via asynchronous JavaScript and XML (Ajax

My current approach involves using hidden inputs to include extra values with Ajax when a form is submitted by a user. The rationale behind this strategy is that I have a lengthy list of text fields, each accompanied by a button. Upon clicking any button, ...

jQuery may not function properly in a dynamic content environment

I'm encountering an issue with my web application. I've developed a chat feature using Ajax, and I want it to load when a button is clicked. The functionality works, but the dynamic data loaded doesn't seem to be compatible with jQuery. Aft ...

The RSS feed is stretching beyond the limits of the table's height

Seeking assistance to adjust the height of an RSS feed widget on my website. The widget is from RSS Dog and I do not have access to the style.css file as it is hosted externally. Despite trying to modify the JavaScript code provided by RSS Dog to set the h ...

Issue with fixed positioning on iPad devices

A unique feature we implemented on our site is a small control that is positioned at the bottom of the screen. However, upon viewing the site on an iPad, the control does not stay fixed at the bottom but rather floats in the middle. What's the issue ...

Troubleshooting: .NET 6 compatibility issue with Bootstrap theme - tips for resolving

NOTE 2: Watch out for the visual studio IDE auto-filling the CSS initialization, as my issue was resolved in the comment section of the question NOTE: I have confirmed that I have the most recent bootstrap package installed from the manager matching the t ...

Creating a Distinct Interior Array Separate from the Exterior

I'm currently working on a project that involves creating a 2D array. I want the interior elements of this array to be black while the exterior elements should be white. However, my 2D array doesn't seem to be forming correctly - it looks more li ...

Ways to implement callbacks within conditional statements?

I'm struggling with understanding how to write callbacks in if statements. I want the first if statement to execute the actionArray function. Once the actionArray function is complete, I need it to check the second if statement and run its associated ...

PHP failing to insert data

I'm facing an issue where my PHP code is not inserting any data. I have a form that displays values, but the update code doesn't seem to be working. Can someone please help me with this problem? Here is the PHP code snippet: if (isset($_POST[&ap ...

Retrieving the title value of the parent span element through a child node with the help of JavaScript or

Rebuilding the query. The HTML element structure is as follows: <li class="inner"><span class="plus" id="sidehome" title="siteHome">SiteHome</span> <ul style="display:none"> <li class="inner"> <span class="plus" id=" ...

Troubleshooting jQuery ajax compatibility issues with IE 7 and 8: Incomplete page loading

I implemented a small snippet of code to dynamically load a page within an element while also concealing certain elements from the loaded content. Despite encountering issues with .load due to image path modifications, I opted for .ajax instead. Upon exe ...