CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dan
Dan

Reputation: 1183

Make text visible on mobile and invisible on desktop

I have a simple box for a project image, title, and description. On desktop, I have some jquery that brings up the project description on mouse enter. On mobile, I want this to just be a block of text that is always visible instead. What I've tried so far is to just "cancel" the javascript on mobile, but that makes the description entirely invisible at all times until the display is resized.

How can I change the .text-container (the description box) to always be visible on mobile, but maintain my mouse behavior on desktop?

Here is my code:

    $(document).ready(function(){
    
    	// coincides with mobile screen width check in media query in style_projects.css
    	var smallScreenWidth = 480;
    
    	$(".projectbox").mouseenter(
    		function(){
    			if ($(window).width() > smallScreenWidth)
    				$("#" + this.id + " .text-container").css("visibility", "visible");
    		}
    	);
    
    	$(".projectbox").mouseleave(
    		function(){
    			if ($(window).width() > smallScreenWidth)
    				$("#" + this.id + " .text-container").css("visibility", "hidden");
    		}
    	);
    
    });  	
    body
    {
    	font-family: Georgia, serif;
    }
    
    .projectbox
    {
    	background-color: greenyellow;
    	width: 240px;
    	height: 181px;
    	cursor: pointer;
    	margin-bottom: 50px;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    .projectbox img
    {
    	height: 160px;
    	width: 240px;
    	position: absolute;
    }
    
    .text-container 
    {
    	background-color: rgba(50,50,50,0.5);
    	position: absolute;
    	visibility: hidden;
    	height: 160px;
    	width: 240px;
    	padding: 10px 10px 10px 10px;
    }
    
    @media only screen and (max-device-width: 480px)
    {
    	.text-container
    	{
    		visibility: visible;
    	}
    
    }
    
    .titlebox
    {
    	background-color: red;
    	padding: 10px 10px 10px 10px;
    	width: 100%;
    	height: 40px;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="projectbox" id="project1">
<div class="titlebox">Project1</div>
<img src="big_test.jpg">
<p class="text-container">
This is a sample project description. It's not a bad description, but it's short.
</p>	
</div>

Upvotes: 0

Views: 1018

Answers (5)

Pankaj Bhandarkar
Pankaj Bhandarkar

Reputation: 498

Try this

HTML:

<div class="projectbox" id="project1">
    <div class="titlebox">Project1</div>
    <div class="block">
            <img src="yourimage.jpg">
            <p class="text-container">This is a sample project description. It's not a bad description, but it's short.</p>
    </div>
</div>

CSS:

body {
    font-family: Georgia, serif;
}
.projectbox
{
    background-color: greenyellow;
    width: 240px;
    height: 181px;
    cursor: pointer;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
}
.projectbox img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}
.text-container {
    background-color: rgba(50,50,50,0.5);
    position: absolute;
    top: 0;
    left: 0;
    height: 160px;
    width: 100%;
    margin: 0;
    z-index: 999;       
    padding: 10px;
    margin-top: 20px;
    opacity: 0;
    transition: all ease .3s;
}
.projectbox .block {
    position: relative;
    overflow: hidden;
}
.projectbox .block:hover .text-container {
    margin-top: 0px;
    opacity: 1;
}
.titlebox {
    background-color: red;
    padding: 10px 10px 10px 10px;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
}
@media only screen and (max-device-width: 480px)
{
    .text-container {
        opacity: 1;
        margin: 0;
    }
}

You can achieve this without using javascript code, I have made some CSS changes for animation effects and minor improvements.

Hope this may help you.

Upvotes: 1

Omar Tanti
Omar Tanti

Reputation: 1448

Have you tried with max-width instead of max-device-width?

@media only screen and (max-width: 480px)

If you are debugging the issue on your laptop, it would be better to use max-width since you might not see the actual css results on a device.

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

  • max-width is the width of the target display area, e.g. the browser;
  • max-device-width is the width of the device's entire rendering area, i.e. the actual device screen.

If you are using the max-device-width, when you change the size of the browser window on your desktop, the CSS style won't change to different media query setting; If you are using the max-width, when you change the size of the browser on your desktop, the CSS will change to different media query setting and you might be shown with the styling for mobiles, such as touch-friendly menus.

Upvotes: 2

annz
annz

Reputation: 319

Please use the class hidden-xs to hide the description in mobiles.Similar classes hidden-md,hidden-lg etc also available

Upvotes: 1

Rohit Verma
Rohit Verma

Reputation: 3785

I think you want like this: 

$(document).ready(function(){

    // coincides with mobile screen width check in media query in style_projects.css
    var smallScreenWidth = 480;

    $(".projectbox").mouseenter(
        function(){
            if ($(window).width() > smallScreenWidth)
                $("#" + this.id + " .text-container").css("visibility", "visible");
            if ($(window).width() < smallScreenWidth)
                $("#" + this.id + " .text-container-mobile").css("visibility", "visible");
        }
    );

    $(".projectbox").mouseleave(
        function(){
            if ($(window).width() > smallScreenWidth)
                $("#" + this.id + " .text-container").css("visibility", "hidden");
            if ($(window).width() < smallScreenWidth)
                $("#" + this.id + " .text-container-mobile").css("visibility", "hidden");
        }
    );

});  
  body
{
    font-family: Georgia, serif;
}

.projectbox
{
    background-color: greenyellow;
    width: 240px;
    height: 181px;
    cursor: pointer;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
}

.projectbox img
{
    height: 160px;
    width: 240px;
    position: absolute;
}

.text-container 
{
    background-color: rgba(50,50,50,0.5);
    position: absolute;
    visibility: hidden;
    height: 160px;
    width: 240px;
    padding: 10px 10px 10px 10px;
}
.text-container-mobile
{
    background-color: rgba(50,50,50,0.5);
    position: absolute;
    visibility: hidden;
    height: 160px;
    width: 240px;
    padding: 10px 10px 10px 10px;
}

@media only screen and (max-device-width: 480px)
{
    .text-container
    {
        visibility: visible;
    }

}

.titlebox
{
    background-color: red;
    padding: 10px 10px 10px 10px;
    width: 100%;
    height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="projectbox" id="project1">
                <div class="titlebox">Project1</div>
                <img src="big_test.jpg">
                <p class="text-container">
                    This is a sample project description. It's not a bad description, but it's short.
                </p>    

                <p class="text-container-mobile">
                   mobile text
                </p>    
            </div>

Upvotes: 1

yogesh rathod
yogesh rathod

Reputation: 310

You can simply give visibility: visible !important; in your media query css.

Upvotes: 0

Related Questions