Troubleshooting: Unable to Hide Element with Display:none Property on Responsive Website

I'm having trouble with a media query problem.

In the PROJECTS section, I would like to display 3 Cards. To achieve this, I need to HIDE card 4 on DESKTOP.

On Mobile devices, I want the second card (Alias Photography) to appear FIRST, so I need to hide card 1.

For screens smaller than 575px, I have set card-1 to display:none. This is currently working as intended.

However, when the screen size goes beyond 575px, the display:none property on card-4 does not work as expected. I believe it may be an issue with my code.

If anyone could take a look at my website and inspect the code to see what might be causing this issue, I would greatly appreciate it. Below is the link to my current website:

www.oliver-stott.co.uk

htmlcsscontainersresponsivedisplay

Answer №1

If you're working on a website using Dreamweaver, I ran into the same issue. I was able to solve it by realizing that the desktop version was inheriting styles from the mobile version. If you set an element to display:none; for mobile devices and want it to be visible on desktop, you need to update the desktop style to display:block. Similarly, if you want something to show on mobile but not on desktop, you'll need to adjust the styles accordingly. I hope this explanation proves helpful.

Answer №2

I was able to figure out this issue by discovering that my card had been automatically set to display:block in the css reset.

Because of this, setting display:none; wouldn't override the display:block property.

To temporarily solve this problem, I added the following CSS to the element I wanted to hide.

.card{                         //This styling applied to ALL cards
    margin: auto;
    padding: 0;
    display: inline-block;  
    vertical-align: middle;
}
.card-4{                      // This specific styling for card 4
    display: none !important;
}

Answer №3

If you're looking for guidance on how to use Bootstrap, I suggest checking out their official documentation: https://getbootstrap.com/docs/4.1/utilities/display/

For your fourth card, consider using the classes d-sm-block d-md-none like this:

<div class="card col-sm-8 col-md-3 m-3 d-sm-block d-md-none">
...
</div>

If you try this out, let me know if it functions as desired.

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

How do I use jQuery to make a div appear when the previous one closes?

I've been experimenting with some code and it's gotten pretty lengthy. It works fine with just a few divs, but what if I need to implement this on 20 or more...? Is there a way to condense the code I've written? (I'm still new to jque ...

javascriptjqueryhtmlcss

IE10 has a problem with the height being set to 100%, but it seems to work fine in Quirks mode in IE and all

Check out this page for reference: I've noticed an issue with scrolling in Internet Explorer, while other browsers seem to be fine. Can you help me understand why IE is causing the scroll and how I can fix it? Thank you, Judson Here's the cod ...

javascripthtmlcss

Load data into a table in HTML after a successful jQuery event

I'm facing an issue with populating an HTML table dynamically. Below is the structure of my HTML table: <table class="flexme" id="table" border="1"> <thead> <tr> <th width="100">Usuario</th> <th wid ...

jqueryhtmlajaxhtml-table

Uninterrupted stream of multi-line div content without any breaks in between

In this scenario, there are three main divs with a width of 100% each, and within each div, there are 3 inner divs with a width of 50%. The current layout is causing a line break after every set of 3 inner elements. <style type="text/css"> .inn ...

htmlcss

What is the formula for finding the distance from the top-left corner of an HTML element to the top-left corner of the window?

Looking for a simple way to accomplish this? Take into account properties such as border and padding. Will this approach be effective even with box-sizing set to content-box or border-box? ...

javascripthtmlcssdom

choosing from dropdown menu items

Learn HTML <table> <tr> <td>ENTER PRINCIPLE AMOUNT</td> <td><input type="text" name="principle" size="7"></td> </tr> <tr> <td>ENTER RATE OF INTEREST</td> <td><input type="text" na ...

javascriptjqueryhtmldrop-down-menu

Transform the jQuery Mobile slider into a jQuery UI slider and update the text

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> function modifycontent() { if (document.getElementById("slider").value<33) { $("#1").fadeIn("slow"); $("#2").fadeOut("slow"); ...

javascriptjqueryhtmljquery-uislider

How can we use JavaScript to retrieve an element with custom styling?

I've encountered a strange issue with my script where it seems to stack up borders and display a 2px border instead of the intended 1px border when switching elements on click. Here is the link code I am using: <li ><a href="plumbing.php"&g ...

javascriptjqueryhtmlcssstyles

What is the best way to extend the final column of a table across the entire width?

Here's the code I'm working with: .frm-find-people table td:nth-child(1) { padding: 5px 15px; width: 100px } .frm-find-people table td:nth-child(2) { border: 1px solid red; } <form class="frm-find-people"> <table> ...

htmlcss

How to dynamically assign a CSS class to the parent <li> element when a radio button is selected using JavaScript

I am facing a challenge with a form that includes multiple series of input fields created dynamically by a plugin. The structure of the code is as follows: <!-- section 1 --> <div> <ul> <li> <input type=" ...

javascriptjqueryhtmlcss

JQuery is having trouble changing the image source in Internet Explorer and Firefox, but it works fine in Chrome

After creating an image gallery that functions perfectly in Chrome, I noticed it fails to work in Firefox or Internet Explorer. While scouring similar questions for solutions, none seem to address the issue at hand. To showcase the problematic code, I&apo ...

javascriptjqueryhtmlcssgoogle-chrome

What is the best way to handle JSON data from an HTTP request using Vue and an HTML script?

Looking for guidance on how to process the json data from this link to display attributes such as latitude, longitude, speed, etc. using vue and html? Json-content: { "64dda53cc503629cedb5f8c8102708ed": { "Test": { "lat": 50, "lon": 10 ...

htmlvue.js

Tips for Adding Style to a Recursive Directory Structure Using CSS

My goal is to create a recursive directory display in HTML using JSON data obtained from a Node.js server and utilizing it as the rendering context for a dustjs-linkedin template. The structure of the data looks like this: { "isDirectory": true, "path ...

htmljsonnode.jscss-tablesdust.js

Slowdown in functionality

My current project involves creating a user interface for an Oven configuration application using CSS, Java Script, Jquery & Json. While the interface performs actions within milliseconds on browsers and simulators, my client has noticed that it takes seco ...

javascriptjqueryhtmlcss

Create an HTML file to showcase the data fetched from my C# application

I'm currently working on creating a standalone EXE application that will generate an HTML document to showcase data retrieved from various APIs using C#. Struggling to find a straightforward method to accomplish this. Any recommendations or tips? ...

c#html

Steps for displaying innerHTML values conditionally with a pipe

Currently working with Angular 8 and looking to conditionally implement the innerHTML feature using a translation pipe. .html <button type="button" mat-flat-button // utilizing translate module internally [innerHTML] = "display ? (HIDE ...

javascripthtmlangular

Leverage the Google Drive API for the storage of app-specific data

I'm currently developing a JavaScript application that runs on the client side and need to store a JSON object containing configuration details in a Google Drive Appdata file. Through the Google Drive API, I can successfully check for the file within ...

javascriptjqueryhtmlgoogle-drive-api

Yet another iteration of an SQL query within a loop for row querying

I am currently facing a coding dilemma as I work on creating a News Feed feature. The functionality of the news feed is satisfactory, but now I wish to enhance it by adding an avatar picture to each news row, representing the author. However, the path to ...

phpjqueryhtmlsqlloops

Removing Header Image from a Single Page on a WordPress Website

Having an issue with my website on WordPress, see it here - I am attempting to remove the home page link attached to the header image on a specific page only of the site. The theme in use is Twenty Thirteen. I believe I need to add some conditional PH ...

phphtmlwordpress

React and Material UI: troubleshooting problems with layout columns

I'm working on a project with three columns and I want to include a column for removing each row. Is it possible to add a "removing" column on the right? If so, how can I go about doing it? VIEW CODESANDBOX: HERE const CustomTableRow = ({ row, index ...

javascripthtmlcssreactjsmaterial-ui