Create a div element that can be expanded on smaller devices

Is it possible to expand a div while hovering on a small or x-small device? I want to achieve something like this:

https://i.sstatic.net/doJKa.png

Currently, I can only hide the yellow div when the page is displayed on a small device. I am looking for a way to reduce it and make it expandable. Any tips on creating a new div with these specifications and displaying it only on small devices instead of the yellow div?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2 col-sm-0 d-none d-lg-block no-float" style="background-color:yellow;">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has.</p>
    </div>
    <div class="col-lg-8 col-sm-10 no-float" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
<div class="col-sm-2 no-float" style="background-color:blue;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

javascriptcssresponsive-designbootstrap-4

Answer №1

Here is a simple jQuery solution you can try:

$(document).ready(function(){
if ($(window).width() < 800) 
 $('.testblock').bind({
  mouseenter: function(e) {
   $(".testblock").addClass("col-sm-2");
   $(".testblock").removeClass("col-sm-1");
  },
  mouseleave: function(e) {
  $(".testblock").removeClass("col-sm-2");
   $(".testblock").addClass("col-sm-1");
  }
 });
});

Check out the live demo on Fiddle: https://jsfiddle.net/wL7snqxe/

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

What is the most effective way to utilize zoom with an Orthographic projection?

I'm attempting to utilize THREE.OrbitControls for zooming in an orthographic projection, but I'm not achieving the desired outcome. I believe it may be possible to adjust the viewSize that is multiplied by left, right, top, and bottom to achieve ...

javascriptthree.js

A guide on iterating through an array in vue.js and appending a new attribute to each object

To incorporate a new property or array item into an existing virtual DOM element in Vue.js, the $set function must be utilized. Attempting to do so directly can cause issues: For objects: this.myObject.newProperty = "value"; For arrays: ...

javascriptvue.js

The scroll function remains unchanged when using overflow-y scroll and border radius

I need help with styling a div that will contain a large amount of text on my webpage. I want to use the overflow-y property for scroll, but the issue arises when trying to style the scroll bar with a radius. Check out this jsfiddle link for reference: ht ...

javascriptjqueryhtmlcss

On the same line, there are two divs with different characteristics - one dynamically changing width and the

I am facing an issue with arranging two divs under one parent div. The parent div is set to have a width of 100%: <div id="parent"> <div class="left"></div> <div class="right"></div> </div> The specific conditions ...

csshtml

Problem encountered while using AJAX to load a PHP script, triggered by an onclick event;

My expertise lies in HTML, CSS, JavaScript, and PHP. However, I find myself lacking in knowledge when it comes to jQuery and Ajax. While I work on web design projects involving bars and nightclubs that prioritize style over performance, my current job dema ...

phpjavascripthtmlmysqlajax

What could be causing the image not to appear on the React app?

I'm currently working on a react website, and I'm facing an issue with the image display on the single product page. Despite trying to tweak both the react and CSS code, I haven't been able to resolve the problem. Below is my react file: im ...

htmlcssreactjsimagemern

What steps should I take to resolve the issue of 'this.reduce() not being a function'?

Here is my code : app.get("/", (req, res) => { const reducer = (acc, guildCount) => acc + guildCount; const results = client.shard.fetchClientValues('guilds.cache.size'); console.log(results) let guildCount ...

javascriptnode.jsexpress

Is there a way I can implement a user-friendly playlist feature in my object-oriented HTML5 JS audio player that allows users

I have created a functional audio player using HTML5 and Javascript, along with some basic CSS. However, I am looking to enhance it by adding a clickable playlist feature. I want the name of the currently playing audio track to be displayed, and users shou ...

javascriptjqueryhtmlaudioplaylist

"Layering text over images using background colors for a unique design touch

Is there a way to create a solid-color overlay that perfectly matches the size of an image using just HTML and CSS? I want to display text on this overlay, but it needs to work with images of any size. The image will be centered and resized to fit within ...

htmlcssimageoverlayfigure

Is there a way to update the dictionary in the context processor without having to reload the page?

I have implemented a custom context processor that returns the value of "unread_messages_count". However, when I try to update this value on the template using the following JavaScript: var update_message_count = setInterval(function(){ ...

javascriptjqueryajaxdjangodjango-context

The UL element does not float to the right in the navbar of Bootstrap 4 Beta

I have noticed that other users have also inquired about this issue without receiving any correct responses. I attempted using float-right and float-xs-right without success. Below is the complete code for the entire webpage as requested. <!doctype h ...

css-floathtml-listsbootstrap-4

JavaScript string: Use regex to find and replace with position index

I'm not very familiar with regex, so I'm curious about the process of replacing a section in a string based on a regex pattern where the index is part of the identified section. Let's consider this example string: let exampleStr = "How do ...

javascriptarraysregexstring

Unable to access remote video streams by directly modifying URL parameters

Recently, I delved into experimenting with the straightforward mediasoup demo available at: https://github.com/Dirvann/mediasoup-sfu-webrtc-video-rooms After setting up the demo, everything seemed to be functioning correctly. The initial task on my agend ...

javascriptsocket.iowebrtcmediasoup

Issue with Angular: Unable to update model before modal closure on submit

I have a search form that is displayed within a modal window created using Angular UI Bootstrap. The input fields in the form update the ng-model when submitted. <script type="text/ng-template" id="mobileSearchPanel"> <form> ...

javascriptangularjsangular-ui-bootstrapbootstrap-modal

Is it possible to utilize a single Promise multiple times?

// App.js sites[site_name].search(value).then(function(results) { console.log(results); }); // SearchClass.js Search.prototype.search = function(search) { var self = this; this.params['wa'] = search; return new Promise(function ...

javascriptnode.js

Ways to move to the next line following the navigation bar text

Below is the code snippet that I am working with: <nav class="navbar navbar-expand-sm navbar-dark "> <div class="container-fluid"> <a class="navbar-brand" href="#">LOREM IPSUM</a&g ...

cssbootstrap-4

combine object with an array attribute

If we have the following objects: let firstObject = {items: ["apple"]}; let secondObject = {items: ["orange"]}; and then execute Object.assign(firstObject, secondObject); the new state will be: firstObject.items[0] //"orange" firstObject.items === sec ...

javascriptarraysangularjs

Ensuring the dropdown menu's functionality in AngularJS

I'm currently working on a code snippet that validates when the user moves away from a specific select element. The goal is to change the border color of the select element to either red or green only when the user tabs away from it or moves the mouse ...

javascripthtmlangularjsvalidationselect

The jQuery functions seem to be malfunctioning when trying to retrieve elements by their ids

I'm having trouble with the click function when using IDs, but it works fine with classes. $('#myTab li a').click(function(e) {} When I switch to using classes like this: $('.nav-tabs a.overview').click(function(e) {} it work ...

javascriptjqueryangularjs

Immersive multimedia experience with HTML5 video interactivity

I am currently facing a challenge with inserting interactive buttons on a video in a responsive manner. Despite my efforts, I have not been successful yet. Screen 1 Screen 2 The screenshots provided depict the video at the end. The goal is to overlay t ...

javascriptjquerycsshtml