css varying padding based on screen size

Is there a way to adjust padding based on screen resolution, specifically for 1366x768px? If the resolution is higher than 768px, I want the padding to be set to 60 on top.

I've attempted using min-height and max-height properties without success. Are there any alternative solutions for this issue?

@media (min-height: 768px) {
    body{
        padding-top: 0px;
    }
}
body {
    padding-top: 60px;
    padding-bottom: 0px;
    margin: 5%;
}

How can the padding be removed when the resolution is smaller than 786px?

htmlcsspaddingresolution

Answer №1

Your rules were arranged in the incorrect order. The correct order should be as follows:

body {
    padding-top: 0;
    padding-bottom: 0;
    margin: 5%;
}
@media (min-height: 768px) {
    body {
        padding-top: 60px;
    }
}

Note: It appears that you are trying to target screens with a height of 768px, but keep in mind that the actual browser height may be lower than this.

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

Can you explain the functionality of the combination selector "AB," where "A" and "B" represent any selectors?

I've been delving into the concept of the "combination selector" by referring to resources on MDN. This selector involves selecting elements that match both criteria A and B simultaneously when they are placed together. Can someone shed some light on ...

htmlcssselector

Has the zip creation tool in the Google Doodle on April 24th been coded entirely in JavaScript?

Was the Gideon Sundback Google doodle created using JavaScript? I attempted to follow along in Firebug, but I couldn't quite grasp its implementation details. Any ideas on how it was possibly implemented? Any insights on the potential techniques use ...

javascriptcssgoogle-doodle

Utilizing Bresenham's line drawing algorithm for showcasing box contours

I am seeking a similar behavior to what is demonstrated on , but with some modifications to the boxes: div { display: inline-block; width: 100px; height: 100px; border: 1px solid black; cursor: pointer; } div.selected, div:hover { backgroun ...

javascripthtmlcss

Is there a way in JavaScript to determine if a textarea contains text that is only one line long?

My aim is to modify the behavior of a textarea based on its content, specifically if it contains more than one line of text. The default setting for a textarea is to have enough height for 2 rows even when empty, which I want to change. I would like to f ...

javascripthtmltextarea

How to Use CSS to Align an Image in a Header

I'm struggling to position an image on the top right corner of my page, specifically in the header. Despite searching for help on Stack Overflow and other online resources, I can't seem to figure it out. Currently, here is what I have: https://i ...

htmlcss

Display the toggle button for expanding/collapsing text only when the length of the string exceeds 50 characters

Is there a way to only show a "read more/less" button in a table if the content exceeds 50 characters? The table contains a mix of content, some short announcements with about 10 characters and others with over 100. <div class="col"> <span ng-c ...

jqueryhtmlangularcss

Tips for populating text box values using AngularJSWould you like to learn how

I have a UI table in HTML where I display records fetched from the database using AngularJS. Scenario: There is a text box where I can select an ID and the related fields are displayed in the table mapped for that particular ID. <td>Name</td> ...

htmlangularjs

Overriding NavLink in React Bootstrap with custom CSS doesn't work as expected

Recently diving into the world of React and Bootstrap, I decided to experiment with them by using react-bootstrap. It was mentioned that a simple way to override Bootstrap CSS is to apply your own CSS on top of it. So here's what I've been workin ...

javascriptcssreactjsbootstrap-4react-bootstrap

What steps should I take to resolve the textarea border bottom CSS effect?

My simple border bottom animation is working fine with a basic input element, but it's not functioning properly when used with a textarea. (If using JavaScript is necessary for a solution, please provide guidance) How can I adjust the height of a te ...

javascripthtmlcss

Importing CSV files into a PHP/MySQL database

Struggling for a whole week to upload a csv file into my database. Despite reading countless tutorials, I can't seem to figure out what's going wrong with this simple code. Any guidance or assistance would be greatly appreciated! :) if(isset($_ ...

phphtmlmysqlcsv

Interference in the output of .innerHTML leads to disruption

I have been working on a feature to display a calculated price based on the selected quantity for each individual product. I attempted to duplicate the code and modify variable names, but encountered issues with the increase/decrease buttons triggering mul ...

javascriptjqueryhtmlcss

The functionality of the image click feature becomes disabled when resizing and switching to tab view

I have added header icons for home and user. When clicked on the user image in desktop view, it should redirect to the respective page. However, when I minimize it in tab or mobile view, nothing is displayed. This issue only occurs with the user image an ...

jqueryhtmlcssjsp

Stop Chrome mobile from automatically detecting phone numbers

I encountered a problem with a webpage on Chrome mobile where text content was mistakenly detected as a phone number. Fortunately, I was able to resolve the issue on Safari by including a specific meta tag. <meta name="format-detection" conte ...

htmliosgoogle-chromemobile-chrome

Display Navigation Bar when Scrolling: Hidden upon Refresh

I'm currently using some jquery to create a fading effect on my Bootstrap 4 navbar when scrolling past a certain point. However, I've encountered a couple of issues. The navbar doesn't appear when reloading the page after already scrolled do ...

javascriptjqueryhtmlcssbootstrap-4

replace the existing file upon upload

Hello everyone, I'm trying to figure out a way to always overwrite the contents of a folder upon file upload, even if the filename is different each time. I want to ensure that only one image is stored at any given time, but since I can't predict ...

c#asp.netmysqlsqlhtml

Is there a way to change the min-width setting of 1200px in the html code on a Wordpress site?

Recently, I made the decision to adjust my wordpress theme to be 860px wide instead of the default 1200px. After putting in the effort to modify all content and headers/footers accordingly, everything appeared to be working perfectly. Even when inspecting ...

htmlcsswordpress

What could be causing my CSS external stylesheet to display in Chrome but not in IE?

I'm facing an issue with my index.php file and the accompanying style.css file in the same folder. Despite trying to link my external stylesheet in the HTML, it refuses to display properly. Can someone please help me troubleshoot? It seems like a stra ...

phphtmlcss

Struggling to create a search bar and dropdown menu that adapts to different

Currently, I'm working on creating an advanced search bar and came across this template here. Everything seems to be functioning properly except for the fact that the search bar and dropdown menu are not fully utilizing the entire width of 100%. I wou ...

htmlcssbootstrap-4

Leveraging external files with Django template referencing

Having trouble including external JavaScript and CSS files in the head tags of my Django template. They only seem to work when placed before the closing body tag. Any idea why this is happening? Another issue I'm facing is that when using inheritance, ...

javascriptpythoncssdjango

deciding on the axis for flipping a div with CSS

Is there a way to change the setting so that when using -webkit-transform: rotateY(180deg), it rotates from either the far left or right edge of the div, similar to how a door swings open? ...

javascriptcss