Harun
July 25, 2023
292 views
0 votes
2 Answers

How can i delete some items based on the screen size ?

I have given at my css for desktop margin-left, width, height, and position:absolute; properties but I need them not to apply in mobile responsive.

How can I dot that ?

Answers

- SofienM
- July 25, 2023 at 9:35 am
- 0 votes
0
What you’re looking for is called a media query

In your case, you just want to add css code that applies for large screens so it would look like:
```
@media(min-width: <the-size-in-pixels-you-choose>px) {
    #my-id {
        margin-top: Xpx;
        ...
    }
}
```
Login or Signup to reply.

- FelixTwoli
- July 25, 2023 at 6:12 pm
- 0 votes
0
To prevent certain CSS properties from applying in mobile responsive views, you can use media queries in your CSS. Media queries allow you to apply specific styles based on the screen size or device characteristics. By defining styles within a media query, you can control how your elements appear on different devices.

Here’s an example of how you can achieve this:

Assuming you have a CSS class called .my-element with the properties margin-left, width, height, and position: absolute; that you want to exclude in mobile responsive views:
```
.my-element {
  margin-left: 20px;
  width: 200px;
  height: 100px;
  position: absolute;
}

/* Media query for mobile responsive views */
@media (max-width: 767px) {
  /* Empty block - properties inside here will not be applied in mobile views */
  .my-element {
    /* You can optionally reset the properties or simply leave it empty */
  }
}
```
In this example, we use a media query with the max-width property set to 767px, which will apply the styles inside the media query block when the screen width is 767 pixels or less (typically corresponding to mobile devices).

Inside the media query block, we have .my-element, but it is empty, meaning none of the properties will be applied to .my-element in mobile responsive views. If you want, you can reset specific properties to their default values inside the media query block.

By doing this, the .my-element class will have its original properties applied on desktop views, and they will not be applied on mobile views due to the media query. This allows you to have different layouts and styles for different screen sizes.
Login or Signup to reply.