Tips for hiding a div only on mobile devices while always displaying it on large screens using AngularJS or CSS

How can I use Angularjs or css to hide a div on mobile devices only, ensuring that it is always displayed on large screens?

Answer №1

Modify the value from 2000px to 480px or any other size that suits your needs

.box{
  width: 100px;
  height: 100px;
  background-color: blue;
  display: block;
}

@media screen and (max-width: 2000px){
  .box{
    display: none;
  }
  input:checked + .box{
    display: block;
  }
}
<input type="checkbox">
<div class="box">
</div>

Answer №2

To apply a specific styling to an element for screen sizes smaller than 480px, you can follow these steps:

1. Add the class "divclass" to your HTML element.
2. In your CSS file, include the following code:
@media (max-width:480px) {
  .divclass{
     display: none;
  }
}

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 is the process for disabling the CSS module feature in Next.js?

In Next.js, Global CSS can only be imported in _App.js. However, importing global CSS in every component is not allowed, so we have to use CSS modules to comply with this restriction imposed by Next.js. Currently, I am in the process of migrating a large ...

Utilizing a drop-down selection menu and a designated container to store chosen preferences

My form includes a select dropdown that displays available options (populated from a PHP database). Users can choose options from the list, which are then added to a box below to show all selected items. However, I am facing a challenge with the multiple s ...

Layering digital sheets of paper and rearranging them with the help of CSS

I want to create a visual representation of a stack of paper sheets as a metaphor. The idea is to neatly stack the sheets on top of each other, with only the header of each sheet visible and the rest of the content covered. !-------------- | Sheet 1 +--- ...

I've encountered an issue when attempting to use innerHTML for DOM manipulation

I've been attempting to remove a specific list item <li> from the inner HTML by assigning them proper IDs. However, I'm encountering difficulties in deleting it. How can I delete these list items after clicking on the cross button? Feel fr ...

Is there a way to display menu items in a list when hovering over the parent element using CSS?

Is it possible to make the code below run when hovering over (#cssmenu ul > li > ul > li ) with the mouse? #cssmenu ul > li > ul > li > ul { right: 1170px; } ...

What is the best way to deactivate div elements once an overlay has been applied to them?

My goal is to place an overlay on my form to prevent users from accessing the content. Even though I have added an overlay, users can still interact with input fields. How can I prevent that? .overlay { background: rgba(0, 0, 0, .75); text-align: ce ...

CSS: positioning controls at opposite ends of a table cell

I need help with styling a button and textbox inside a table cell. Currently, the button is stuck to the textbox, but I want them positioned at opposite ends of the cell. How can I achieve this? <td style= "width:300px"> <asp:TextBox ID="Tex ...

The download attribute is not functioning properly on both Chrome and Edge browsers

I've been trying to use the download attribute, but it doesn't seem to be working. I have also attempted to use the target attribute to see if there are any issues with downloading from the server or from a web (https) source. Unfortunately, noth ...

Troubleshooting: Unable to create records in MongoDB using MEAN Stack

I am currently in the process of developing a MEAN stack application. My main objective at this point is to create a record in MongoDB from a form, but I seem to be encountering some issues. The data binding between the view and the controller appears to b ...

Add a <div> element to a webpage in a random location every time the page is refreshed

I have a variety of 2 types of <div>s displayed on a single page. Collection 1 consists of: <div class="feature">content 1</div> <div class="feature">content 2</div> ...and so forth. Collection 2 consists of: <div class ...

The scrollbar fails to reach the bottom of my table, preventing me from viewing the entire content

I'm currently facing a challenge with a table on my webpage that displays data but isn't scrolling all the way to the bottom. This code was implemented by previous developers, and as someone who isn't well-versed in CSS, I'm struggling ...

Establish the minimum and maximum values for the text field depending on the selection made in the previous dropdown menu

For my project, I need to create a dropdown menu and a text box positioned next to it. I want the text box to have specific character limits based on the option selected from the dropdown. For example, if "Option 1" is chosen, then the textbox should only ...

Floating Action Button is not properly attached to its parent container

When developing my React Js app, I decided to utilize the impressive libraries of Material UI v4. One particular component I customized is a Floating Action Button (FAB). The FAB component, illustrated as the red box in the image below, needs to remain p ...

adjusting the background with repeat-y pattern placement

I'm having an issue with setting a background image as a wrapper for the main content of my page. Currently, I've set the background image like this: #background { background: url("../image/bg.png") repeat-y 133px 50px; color: #000000; ...

How to place a div with 100% width at the bottom of a float with a fixed width

Each day the same question seems to pop up, yet this particular issue has me stumped... My goal is a simple one - I aim to design a fixed width layout with 3 columns, while ensuring that the header and footer stretch across 100% of the screen. Everything ...

`The universal functionality of body background blur is inconsistent and needs improvement.`

I've developed a modal that blurs the background when the modal window is opened. It's functioning flawlessly with one set of HTML codes, but encountering issues with another set of HTML codes (which seems odd considering the identical CSS and Ja ...

Reusing directives in AngularJS is a powerful way to

I'm curious if I can create an AngularJS directive and then use it dynamically at runtime. Here is a simple example: app.directive('w34Directive',function(){ return{ template : "<p>test</p>" } }) And here is the HTML: ...

Determining the parameter type for the directive

How can you specify the types of parameters for the directive in AngularJS? Which type should be used for & binding? Refer to ngdoc or jsdoc for an example code. UPDATE: I am looking for answers to the following questions * @param {<< What sh ...

Uploading Massive Form Data Using Angular JS

After spending countless hours on this project, I still can't figure out how to post data into a table using JavaScript objects. While I can easily work with smaller data sets, I'm struggling with handling multiple nested objects. EDIT: ...

Achieving Perfect Alignment for Absolutely Positioned Divs in

I'm currently facing an issue where the image I'm trying to center horizontally also moves the parent div downward when I try to vertically center it using top-margin. This is not the desired outcome. If you'd like to see what I mean, I&apo ...