There are 3 identical <div>s available:
<div class="box">Hello World!</div>
<div class="box">Hello World!</div>
<div class="box">Hello World!</div>
I need these <div>s to be visible on desktop screen size, only two of them to appear on tablets, and just one on mobile. I'm looking for a way to achieve this using bootstrap and CSS without modifying the HTML structure. Can anyone assist with this task?
Using CSS, Media Queries can be utilized for responsive design.
@media (max-width: 768px) {
.box:first-of-type,
.box:last-of-type {
display: none;
}
}
@media (max-width: 992px) {
.box:first-of-type {
display: none;
}
}
Bootstrap provides Utility Classes that can be directly applied in HTML for convenience. To achieve similar results with utility classes:
<div class="box d-none d-md-block">Hello World!</div>
<div class="box d-none d-lg-block">Hello World!</div>
<div class="box">Hello World!</div>
To determine the type of device and hide elements using CSS, you can utilize media queries along with the nth-of-child selector to specify which elements should be hidden with display:none. See the code snippet below for a clearer explanation.
@media (min-width: 576px) {
.box:first-child, .box:last-child{
display:none
}
@media (min-width: 768px) {
.box:first-child{
display:none
}
Mobile devices are targeted at 576px and tablets at 768px. The three divs will remain visible by default on desktop devices.
Allow me to demonstrate a simple method for achieving this:
To modify your HTML file, make the following changes:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<div class="box desktop tablet mobile">Hello World!</div>
<div class="box desktop tablet">Hello World!</div>
<div class="box desktop">Hello World!</div>
In your CSS file, implement the following code:
.box {
display: none;
}
@media only screen and (min-width: 1150px) {
.box.tablet {
display: none;
}
.box.desktop {
display: block;
}
}
@media only screen and (min-width: 768px) and (max-width: 1149px) {
.box.desktop {
display: none;
}
.box.tablet {
display: block;
}
}
@media only screen and (max-width: 767px) {
.box.desktop {
display: none;
}
.box.tablet {
display: none;
}
.box.mobile {
display: block;
}
}
To achieve this, CSS media queries can be utilized. By using CSS selectors based on element position, you can implement @imran's solution to address your issue.
A media query detects the size of the window and triggers specific CSS rules when the screen reaches a certain size. Utilizing .box:last-child and .box:first-child selectors allows you to target specific elements within the HTML. For more information, refer to the links provided below:
Media Query: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
nTh Selector: https://www.w3schools.com/cssref/sel_nth-last-child.asp
After researching extensively, I have been unable to find a solution to my problem. In order to better illustrate my issue, here is the code for reference: jsfiddle I am looking to create a sliding effect for a calc div where it moves to the left, simila ...
When I have different functions for clicking on item and title, clicking on the item works fine but clicking on the panel triggers both functions. Is there a way to resolve this so that I can click on the item using Function_1 and click on the panel using ...
I have a question regarding setting the min/max date for a date input in my Angular 6 project. How can I ensure that only dates up to the current date are enabled? So far, I have attempted to initialize a new Date object in the ngOnInit function and set t ...
I am in the process of building a website with 5 different pages, but I want the header to remain consistent across all pages. To achieve this, I plan to use an external JavaScript file (.js). The header includes the website name (displayed as an image) an ...
Welcome! This is my HTML code: <div style="width:220px;float:left;" id="radio_text"> <ul style="width:20px;float:left;display:block;"> <li style="list-style:none;line-height:13px;height:13px;float:left;"><input type="radio ...
I have a single MVC project where, in the BusinessPosition.cshtml file, I am dynamically creating a tree view at runtime. By default, it displays the main child of the root node upon page load, like this: <ul class="col-lg-20 col-sm-12 col-xs-12" style ...
Within my HTML structure: <Col md="6"> <div className="hero-section"> <div className={`flipper ${isFlipping ? "isFlipping" : ""}`}> <div className="front"> <div className="hero-section-content"> ...
Looking for a way to extract a specific substring from a given string: var str = `<ul class="errorlist"><li>Enter a valid email address.</li></ul>`; Is there a method to extract the following substring? 'Enter a valid email ...
I'm attempting to include the align="center" attribute to this Material Design Lite card: <main class="mdl-layout__content" align="center"> <div class="mdl-cell mdl-card mdl-shadow--4dp portfolio-card"> <div class="mdl-card__title"&g ...
Currently, I am working on a responsive layout using Bootstrap 4 with two columns. Each column contains a total of 9 divs - four in the first column and five in the second column. My goal is to rearrange the order of the divs within the columns when the vi ...
I am currently facing an issue with my post carousel. The carousel has two arrows on the side, and I have designed a background in the shape of circles for these arrows. However, I can't seem to figure out how to center the arrows inside the circles. ...
I am looking for a way to assign a JavaScript function to an HTML attribute. For example: <li data-ng-repeat="job in jobList" class= dynamicClass(str) data-filter = "dynamicFilter(str)"> The reason I want to do this is because the class name and ...
I'm currently in the process of creating a coming soon website, which you can find hosted here. However, I am having some trouble aligning the button correctly. My goal is to have it positioned to the right of the text field. How can I achieve this? ...
I'm facing a challenge in making an input field and button functional even when they are positioned behind a uniquely shaped PNG image. https://i.stack.imgur.com/eOg0N.jpg Initially, I believed that by applying a shape to the image, it would automat ...
In the process of developing a collection of reusable components, I have utilized material-ui and styled them with CSS. One specific requirement is to dynamically set the width of a component through a prop passed into a custom button. My goal is to lever ...
Is there a way to make my webpage fixed-width instead of liquid? I've tried changing the container size to pixels but the text still collapses when I resize the browser. Any suggestions on how to keep it at a fixed width? <!DOCTYPE html PUBLIC "-/ ...
I'm having trouble parsing JSON data sent from a PHP page using jQuery. The result I'm getting is just an opening curly brace: { I'm not sure how to fix it. In my PHP code, I'm creating the JSON data like this: $load_op_cm = $DBM -> ...
How can I update only the marker on a map when the device is in motion or has increased accuracy? I want to reload the map when the position changes, but only move the marker. Below is the code snippet that I currently have: if (navigator.geolocation) { ...
In the process of creating a game that requires registration for use, I am attempting to add the username and password inputted into a form to my JSON file. The current structure of the JSON file is as follows: { "LogIns":[ { "Username":"mike ...
Removing these two elements will enable the image to display properly, however, it does not stay aligned with the footer when viewed in a browser. Here is a preview of how it looks: Below is the CSS code along with the HTML: <style> body { ...