Concealing visuals for smaller screens

I've been struggling to hide a specific image on my website for mobile devices. I've experimented with various combinations of HTML and CSS code, but I just can't seem to make it work. I suspect the issue might have something to do with my div classes and ID tags.

If anyone could help me figure this out, I would really appreciate it.

Here's the HTML code:

<section id="left-sidebar">
 <div class="logo">
    <a href="#intro" class="link-scroll">
      <img src="assets/images/other_images/logo.png" alt="description of image">
      <img src="assets/images/other_images/nav.png" class="nav">
    </a>
 </div>

And here's the CSS code:

@media (max-width: 600px) {
    #left-sidebar .logo .nav  {
        display:none;
    }
}
htmlcssmobile

Answer №1

Utilize the @Media screen feature for responsive design:

screen Designed for various devices like computer screens, tablets, and smartphones.

Enhance it with pixel-ratio for tailored results. Find more examples here

For instance (specifically for Samsung Galaxy S3):

/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
{
    // add your personalized styles here
    #left-sidebar .logo .nav  {
       display:none;
    }
}

Answer №2

<style>
.myClassName{display:inline;}
@media screen and (min-width: 320px) {
      .myClassName{
            display:none !important;
   }
 }

@media screen and (max-width: 768px) {
      .myClassName {
            display:none !important;
   }
 }

</style>

Answer №3

After running your HTML and CSS on JSFiddle, I made a slight modification to your CSS:

  img {
            display:none;
        }

As a result, I obtained this

I'm not entirely certain if this is what you were hoping to achieve.

Answer №4

This solution appeared to be effective for my situation, although it was quite unexpected.

@media (max-width: 768px) {
      #left-sidebar .logo .nav  {
            display:none;
   }
 }

Answer №5

Instead of utilizing display:none, consider implementing the following:

@media (max-width: 600px) {
    #left-sidebar .logo .nav  {
        display:hidden !important;
    }
}

If this code does not resolve the issue, double-check the device width and continue troubleshooting.

Answer №6

<style>
.customClassName{display:inline-block;}
@media screen and (max-width: 350px) {
      .customClassName{
            display: none !important;
   }
 }

@media screen and (min-width: 700px) {
      .customClassName  {
            display: none !important;
   }
 }

</style>

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 CSS be used to separate elements within a div from the overall page styles, similar to how an iFrame functions?

Is there a way to isolate elements within a div, similar to how it would behave in an iFrame? I am facing issues with the global SharePoint styles affecting my app inside SharePoint. I want to completely disable these global styles so that my app only use ...

javascripthtmlcssangularjssharepoint

The functionality of List.js is currently not optimized for use with tables

I'm currently experimenting with list.js in order to create a real-time search feature for a table. I have successfully tested it on lists (similar to the example provided at ). However, I am facing difficulty replicating this functionality for tables ...

javascripthtmlsearchlistjs

Is Live SASS Compiler generating unnecessary files?

Currently, I am in the process of learning how to integrate SASS into my web development projects. However, I am facing some challenges when it comes to properly compiling my .scss files into a single .css file. Upon running sass --version in my terminal, ...

cssvisual-studio-codenpmsassvscode-extensions

Webster Barron code script

I'm attempting to replicate the concept of this video https://www.superhi.com/video/barron-webster using text, but I am encountering difficulties in achieving the desired effect. The design text is currently overlapping my name and displaying in rev ...

javascripthtmlcss

Guide to highlighting a particular letter in a string variable using JavaScript and AngularJS

Looking to highlight specific letters within a string variable. I have the string stored as an AngularJS variable in a table like this: <td>{{variable}}<td> In my JavaScript file, I am passing a variable for Angular that contains the string & ...

javascriptangularjshtml

When attempting to retrieve the innerHTML of a <div> element within a <Script> tag, the value returned is undefined

Utilizing a masterpage to create a consistent header across all content pages, I encountered an issue on one page. I needed to retrieve the innerHTML of a div element and pass it to an input control on the same page in order to access the updated innerHTML ...

javascriptjqueryhtmlasp.net

Managing the height of a TextArea within a Flexbox environment

After exploring various methods for achieving auto-height in a textarea, I decided to go with the contenteditable approach as it seemed cleaner to me. However, while it worked perfectly on its own, it failed when placed within flexbox containers. I experi ...

csscross-browserflexbox

What causes the values to constantly change whenever I insert an element into the array?

When I add an element, it automatically replaces all the others. This issue only occurs when I insert the entire object; if I insert a typical element such as an integer or a string, it works without any problems. <body> <div id="app&quo ...

htmlvue.js

Storing user data on the client side of a website is most effectively accomplished by

I am looking to incorporate the following features: I would like to personalize the user experience by greeting them with their login name on the webpage (e.g. 'Hello, Fred!'). I also want to display or hide certain content based on the user&apo ...

javascripthtmlsecurityweb

Utilizing angularjs ng-repeat directive to present JSON data in an HTML table

I've been struggling to showcase the JSON data in my HTML table using AngularJS ng-repeat directive. Here's the code snippet: <thead> <tr> <th ng-repeat="(header, value) in gridheader">{{value}}</th> </tr> </ ...

javascriptjsonangularjshtml

css: Positioning divs relative to their parent div

In my design, I want the blue div to be positioned next to the red div without affecting the yellow div's placement. http://jsfiddle.net/pCGxe/ Is there a cleaner way to achieve this layout without resorting to using position:absolute or other trick ...

csslayout

The onbeforeunload event should not be triggered when the page is refreshed using a clicked button

Incorporated into my webpage is a sign-up form. I would like it to function in a way that if the user accidentally refreshes, closes the tab, or shuts down the browser after entering information, a specific message will appear. <input type="text" place ...

javascriptphpjqueryhtmlinput

Implementing automatic dark mode activation during nighttime with jQuery or JavaScript

I'm looking to implement an automatic dark mode feature on my website that switches on at night and off during the day or morning. Currently, my website has a dark mode toggle code that allows users to switch between dark and light modes using local ...

javascripthtmljquerylocal-storagedarkmode

establish the parent child size with CSS

In my current project, I am faced with a challenge regarding the CSS and HTML code. I am attempting to have a <div> element positioned after an <img> element inherit the width and height of the image. This <div> is meant to act as an over ...

javascripthtmlcss

Connect the mileage tracker to a Datalist or grid view component

I recently downloaded the Odometer Sample from , however, I am facing an issue where only the first element in the Datalist is getting the Odometer display, while others are not displaying it. Here is the snippet of code: <script type="text/javascript" ...

javascriptjqueryasp.netvisual-studio-2010css

Experiencing an issue of receiving an undefined value while attempting to retrieve a value from an input box

HTML: <input value='Rename' type='button' onclick='RenameGlobalPhase({$row['id']});' <span id='renameGlobalPhase{$row['id']}'>" . $row['phase'] . "</span> Below you wil ...

javascriptjqueryhtml

Selecting a language by clicking on it

I recently designed a bootstrap navigation bar for my website and incorporated a language selection dropdown menu into it. <li class="nav-item dropdown"> <a class="nav-link dropright" href="#" id="navbarDropdown" role="button" data-toggle="dr ...

javascripthtmljsonweb

IE 11 does not support the use of absolute positioning with a height of 100%, however, this functionality works perfectly on Microsoft Edge

It appears that in IE 11, my absolutely positioned element is not displaying within another element with a height:100%. Strangely, it only works if I assign a fixed height to the element (even though its parent has a fixed height). Here is the HTML code: ...

cssinternet-explorerinternet-explorer-11

Tips for expanding the content of a blogger page to fill the entire frame of the page

Check out this page: . Currently, the video on the page does not fill up the entire screen. Any suggestions for a solution? ...

javascripthtmlcssblogger

What are some alternative ways to arrange this main navigation bar?

Check out the website, below the map you'll find an unordered list: HTML code: <ul class="play_navigation"> <li class="active"><a href="#" class="barino_story_bottom">The Story</a></li> <li><a href="#" ...

jqueryhtmlcssxhtml