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
Currently, I am facing an issue on my website in Firefox 7. A margin is causing the gradient in #wrapper to shift upwards from the bottom, disrupting the layout. Despite resetting the margin to 0 on body and html, I am unable to pinpoint the root of the pr ...
I'm currently working on a basic login page using express.js + E.js. If the login credentials are incorrect, I have a variable badLogin that is triggered (see below). However, my goal is to redirect the website back to the login page instead of remai ...
Does anyone have experience implementing auto-resume mp3 music on a web application so that the music continues to play even when the user changes pages? I would like the music to seamlessly play as the user navigates through my web application. Can someo ...
Check out this example of HTML code: This is how you create a visible button and display the selected file: <button id="visible-btn">visible button</button> <p>selected file is: <span id="selected-file"></spa ...
Looking for a way to make a div both zoomable and scrollable within a fixed-width container using transform: scale(aScaleRatio) for zooming in/out. Check out this demo for achieving the zoom effect. However, the inner div seems to have trouble aligning to ...
I've set my vertical navigation to be 10% width and my content to be 90%, but for some reason, I can't get them to align properly next to each other. I've experimented with float: left and display: inline-block, but so far nothing has worked ...
I'm trying to center the li items "on the entire page width" in this basic bootstrap navbar that I've shared. I attempted using "justify-content-center" in the parent. It did center the navbar items, but not across the entire page width. The ite ...
My dilemma involves styling a textfield in two different locations on my website, each with its own parent element. The second location requires an additional margin-top that the first does not. What is a clever way to adjust the original margin-top withou ...
Below is the code snippet provided: <div id="js"><button onclick="document.getElementById('js').innerHTML=('<form> <input type=text name=tick1></input> <input type=text name=tick2></input> ...
My goal is to have two circular SVG images layered on top of each other, with the top image in grayscale and the bottom image in full color. I want to be able to gradually remove the top image based on a percentage from 1-100, similar to how hands sweep a ...
Validation has been applied to the form, and there are div elements within the input fields with corresponding IDs. The goal is to display error messages within those divs. Specifically, if an input field is missing, the errorMessage should be set in the ...
Trying to implement a star rating in a specific HTML file The file I am working on is called book_detail.html {% extends "base.html" %} {% load static %} {% block title %} Block Detail Page {% endblock title %} {% block sidenav %} {% for item ...
In my responsive side menu, there is a submenu structured like this: .navbar ul li ul I would like the child menus to be hidden and only shown when the parent menu is clicked. Although I attempted to achieve this with the following code, it was unsucces ...
I am a newcomer to the world of Wordpress and I'm currently in the process of making adjustments to an existing theme. The theme itself is generating custom CSS code and adding it to the wp_head section. add_action('wp_head', 'custom_c ...
Can someone assist me with how to close the bio-info popup and implement it in the code provided below? The HTML file: <ul class="ch-grid"> <li> <div class="bioinfo"> <h2>tooltips</h2> /div> The CSS file: .bioinfo { ...
Currently, I am working on xpages using Bootstrap with the Xpages Properties Application Theme "Bootstrap3.2.0_flat". However, after upgrading to Domino 12, I started encountering errors when trying to open xsp pages. I attempted changing the xsp Applicati ...
I am looking for an easy way to convert PHP 'echo' code from HTML. For instance, similar to this tool: This particular tool converts JS printing code from HTML. In summary, I wish to see the following conversion: from <div id="foo"> ...
Implementing ngInfiniteScroll for endless scrolling on my website has required me to set the height of the outer div to a specific value. Without this adjustment, the Infinite Scroll feature activates unintentionally. <div style="height: 1px"> &l ...
There is an interesting issue that I have come across. I recently made all text on my Bootstrap4 website responsive by modifying the CSS. This adjustment has been successful, and here is the code snippet I used: @media (max-width: 576px) { html { font ...
Is it possible to make clicking on an empty space inside a table column (td) with checkboxes in it check or uncheck the checkbox? I am limited to using only that specific td, and cannot set event handlers to the surrounding tr or other tds. The functional ...