Identifying page dimensions and implementing CSS adjustments when the width decreases to less than 500 pixels

I'm working on a website and I need to create a script that can detect when the page width is greater than 500px or less than 500px so I can adjust the layout accordingly. At the bottom of the page, there are some links arranged like a footer. When the page width is below 500px, I want these links to be closer together, for example:

<div class="footer-titles">
    <ul class="footer-titles-ul">
        <li><h class="titles">Link 1</h></li>
        <li><h class="titles">Link 2</h></li>
        <li><h class="titles">Link 3</h></li> 
    </ul>
</div>

Here is my CSS code:

.footer-titles{width: auto; min-width: 800px; left: 0px; right: 0px; position: absolute; bottom: 210px;}
.footer-titles-ul {list-style: none; padding-left: 120px;}
.footer-titles-ul li {padding-right: 90px; display: inline;}

When the page width is below 500px, I want to change the padding-right of the .footer-titles-ul li to 30px. However, if the page width goes back to being over 500px, I want it to go back to its original value.

javascriptjqueryhtmlcsswidth

Answer №1

Avoid using JavaScript for this task; instead, opt for CSS3 Media Queries. Unless you require support for outdated browsers that can't be achieved with a polyfill, JavaScript is unnecessary.

To implement the desired change, consider the following example:

@media screen and (max-width: 500px) {
  /* CSS styles for screens under 500px */

  .element{
    background-color: blue;
  }
}

Answer №2

If you want to optimize your website for different screen sizes, utilizing media queries is essential. Simply include this snippet at the end of your CSS stylesheet:

@media only screen and (max-width: 500px) {
    .footer-titles-ul {padding-right: 30px;}
}

Answer №3

If you are considering using jQuery, this code snippet may be useful to adjust the padding of elements based on viewport width. However, it is worth noting that CSS media queries can also achieve similar results.

$(document).ready(function(){
    var detectViewPort = function() {
        var Wwidth = $(window).width();
        if (Wwidth < 500){
            $('.footer-titles-ul li').css('padding-right', '30px');
         }
        if (Wwidth > 500){
            $('.footer-titles-ul li').css('padding-right', '90px');
        }
    };

    $(function(){
      detectViewPort();
    });

    $(window).resize(function () {
       detectViewPort();
    });
});

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

Format the date using moment() for the last week of the current year and return it with the year. Next year's

I encountered an unusual problem when using Moment.js with Angular.js. When I use the .toISOString() method, I get the correct date, but when I use the .format() method, the date is completely wrong. Here is an example to illustrate the issue: Code snip ...

javascriptangularjsmomentjs

Enhancing User Experience with React Hover Effects

I'm currently in the process of developing a React component library, and I'm looking to enhance the components with some stylish flair. Everything seems to be working smoothly, but I'm interested in changing the background color when a user ...

javascriptcssreactjsstyles

How can I prevent my carousel div from aligning with the NavBar on the same line?

I recently created a simple HTML landing page template, which includes a navigation bar in the header section and a carousel displaying various icons in the body. However, I am facing an issue where both elements are appearing together instead of on separa ...

htmlbootstrap-5

Spin the background image with the help of the sx properties

I need help figuring out how to rotate a background image using the MU5 'sx' props syntax. I have searched for an answer but couldn't find one. All I want is to rotate the background image without affecting any child components of the grid: ...

javascriptreactjsmaterial-ui

Using the mouseleave event to efficiently close a Bootstrap-Vue Tooltip

I've developed a custom color picker component in Vue 2 using a combination of bootstrap-vue's button and tooltip components as shown below: <template> <div> <b-button ref="button" @cli ...

javascriptvue.jsvuejs2mouseeventbootstrap-vue

Measuring the height of a div element using Vuejs

Let me explain my current situation: I am trying to determine the height of a DIV component in order to dynamically inform its child component about its size. I have been working on implementing manual loading mode, but I have encountered an issue where t ...

javascriptcssvue.js

Displaying various results using a range slider

I really need some assistance in making this range slider produce multiple outputs. I've attempted a few different options, but unfortunately, I haven't been able to figure it out. My goal is to have the text "590" display as 5.9 times the value ...

javascriptjqueryhtmlcss

Is it possible to create a form inside a tooltip?

Looking to incorporate a jQuery feature into a form where a simple yes or no question appears upon hovering over it. However, encountering issues getting jQuery to recognize the dynamically created tooltip and submit alert function not working ("$('#w ...

javascriptjqueryhtmljquery-ui

Angular 2: Applying class to td element when clicked

I am working with a table structured like this <table> <tbody> <tr *ngFor="let row of createRange(seats.theatreDimension.rowNum)"> <td [ngClass]="{'reserved': isReserved(row, seat)}" id={{row}}_{{sea ...

javascripthtmlangular

Leverage jquery to adjust the height or width of an element depending on which dimension is larger

I'm a beginner in jquery and html and am currently developing a gallery webpage. The functionality involves setting the selected image as the page background and then scrolling vertically based on the mouse pointer's position. This works well for ...

jquerycssheightwidth

What will be provided as the outcome?

I have recently started learning express.js. The following code snippet is taken from the router library of express.js. var proto = module.exports = function(options) { options = options || {}; function router(req, res, next) { router.handle(req, ...

javascriptnode.jsexpress

Sending an Ajax request to a nearby address

I'm feeling a bit lost on how to achieve this task. I've been searching online, but it seems like my search terms may not have been quite right. My goal is to set up a RESTful api. $.ajax({ type: "POST", url: "https//my.url/", data: ...

javascriptjquerydjangojson

Issue with collapsed accordion toggle functionality

HTML <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data ...

htmlcssbootstrap-4

What could be the reason for my post jQuery Ajax request sending JSON data?

After downloading some code, I came across the following fragment: function FetchCommentsBySessionIDWCF_JSON() { varType = "POST"; varUrl = "service/CommentSessionIDWCFService.svc/FetchCommentsByPost"; varData = ' ...

javascriptjqueryjson

Using jQuery to access a server-side SQL database through PHP

After searching for an example on connecting a client to a server's SQL database using JQuery, AJAX, and PHP, I came across this seemingly well-executed guide: Example Link. All my PHP files and the jQuery library (javascript-1.10.2.min.js) are contai ...

javascriptphpjquerysqlajax

Troubleshooting React hooks: Child component dispatches not triggering updates in parent component

I've been trying to implement a method of passing down a reducer to child components using useContext. However, I encountered an issue where dispatching from a child component did not trigger a re-render in the parent component. Although the state ap ...

javascriptreactjsreact-hooks

Unique column arrangement specifically designed for the initial row within the loop

My webpage features a layout that showcases 4 images on each row. However, I am looking to create a special first row with a unique column configuration compared to the rest of the rows. Here is an example of what I have in mind: https://i.sstatic.net/Rs ...

javascriptnode.js

Utilizing the ng-if directive to choose the second element within an iteration of an ng-repeat loop

I am currently working on a project where I need to organize and group content by day. While the grouping function is working fine, I am facing an issue with treating the first two items in the loop differently from the rest. I have experimented with using ...

javascriptangularjs

What is the best way to incorporate a select dropdown menu into jTable during editing or creation?

When exploring jtable.org and attempting to modify a record on their demo table, one will observe the different field types available such as checkboxes and dropdown menus. However, all the demos and downloaded examples only display textfields for the ed ...

javajquerydrop-down-menujtable

Enhancing the Bootstrap container using JavaScript

I am working with a Bootstrap container: <div class="container"> <div class="jumbotron"> <div class="row"> <div class="col-lg-8"> <form action="upl ...

javascriptphpwebbootstrap-4