Increase the height of a component when viewed on mobile devices

https://jsfiddle.net/7v0dyfo3/

This is the concept I am attempting to implement for a listing, albeit without proper styling. While it looks good on most screens, the issue arises with its resizing behavior. I aim for the episode-box div to adapt its height for smartphone displays, allowing text to be displayed vertically below the image.

The current code may not be perfectly structured, so I would appreciate guidance on identifying where I have gone wrong in terms of inefficient resizing.

<article class="full-width">

    <div class="post-box">

        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="guide-art-container">   

                        <div class="episode-content">

                            <div class="saga">

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="episode-box">
                                            <div class="episode-img">
                                                <img class="thumbnail-ep" src="http://image.noelshack.com/fichiers/2015/35/1440684992-img.jpg"/>
                                            </div>
                                            <span class="episode-nb">    <p>001</p></span>
                                            <div class="episode-single-content">
                                                <div class="episode-single-title">
                                                    <h5><b><a href="http://google.fr">Lorem Ipsum Title</a></b></h5>
                                                </div>
                                                <div class="episode-single-desc">
                                                    <p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
                                                    <br> Sed interdum luctus erat, in Sed interdum luctus erat, in</p>
                                                    <hr2>
                                                    <span class="cast"><p>        <b>Scénario:</b>  Sed interdum · <b>Art:</b> Sed interdum ·  <br> 
<b>Animation:</b> Sed interdum · <b>Réalisation:</b> Sed interdum</p></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="episode-box">
                                        <div class="episode-img">
                                            <img class="thumbnail-ep" src="http://image.noelshack.com/fichiers/2015/35/1440684992-img.jpg"/>
                                        </div>
                                        <span class="episode-nb"><p>001</p></span>
                                        <div class="episode-single-content">
                                            <div class="episode-single-title">
                                                <h5><b><a href="http://google.fr">Lorem Ipsum Title</a></b></h5>
                                            </div>
                                            <div class="episode-single-desc">
                                                <p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
                                                <br> Sed interdum luctus erat, in Sed interdum luctus erat, in</p>
                                                <hr2>
                                                <span class="cast"><p>    <b>Scénario:</b>  Sed interdum · <b>Art:</b> Sed interdum ·  <br> 
<b>Animation:</b> Sed interdum · <b>Réalisation:</b> Sed interdum</p></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!--.post-box-->
</article>
htmlcsstwitter-bootstrap-3

Answer №1

To achieve the desired effect, you must implement media queries

Consider this example: (Resize your browser to observe the changes)

.full-width {
    margin: 0 0 30px;
    padding: 0;
}
.container {
    max-width: 1170px;
    width: 100%;
}
.row {
    margin-right: -15px;
    margin-left: -15px;
}
@media (min-width: 1200px)
.col-md-12 {
    width: 100%;
}
.guide-art-container {
    padding: 25px;
}
.saga-title {
    margin-top: 15px;
}
.episode-box {
    width: auto;
    background-color: #F9F9F9;
    margin-top: 7px;
    box-shadow: inset 0px 100px 150px -150px rgba(204,204,204,1);
    height: 150px;
    border: 1px solid #E8E8E8;
    position: relative;
}
.episode-img {
    float: left;
}
.episode-box img {
    float: left;
    margin-right: 10px;
    padding: 5px;
}
span.episode-nb {
    position: absolute;
    bottom: 2px;
    left: 5px;
    background-color: #FC8A19;
    max-width: 100px;
    width: 100%;
    opacity: 0.8;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 15pt;
}
.episode-single-content {
    padding: 10px 10px 10px 0px;
    max-height: 150px;
}
.episode-single-desc {
    max-height: 150px;
    font-size: 9pt;
    padding-right: 4px;
    padding-left: 5px;
    padding-top: 5px;
}
span.cast {
    font-size: 7.4pt !important;
    font-family: 'Roboto', Arial, Tahoma, Sans-serif;
    line-height: 19px;
}
.thumbnail-ep {
    float: left;
    margin-right: 10px;
    position: relative;
    max-width: 260px;
    width: 100%;
    padding: 2px;
}
span.episode-nb {
    position: absolute;
    bottom: 2px;
    left: 5px;
    background-color: #FC8A19;
    max-width: 100px;
    width: 100%;
    opacity: 0.8;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 15pt;
}
.episode-single-title h5 {
    margin-top: 2px !important;
}

@media only screen and (max-width : 480px) {
    .episode-img {
        float:none;
        position:relative;
    }
    
    .episode-box img {
         float:none;   
    }
    
    .thumbnail-ep {
        float:none;    
    }
    
    .episode-box {
         height:auto;   
    }
}
<article class="full-width">

<div class="post-box">

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="guide-art-container">



<div class="episode-content">

<div class="saga">

<div class="row">
<div class="col-md-12">
<div class="episode-box">
<div class="episode-img">
<img class="thumbnail-ep" src="http://image.noelshack.com/fichiers/2015/35/1440684992-img.jpg"/>
                                                    <span class="episode-nb"><p>001</p></span>
</div>

<div class="episode-single-content">
<div class="episode-single-title">
<h5><b><a href="http://google.fr">Lorem Ipsum Title</a></b></h5>
</div>
<div class="episode-single-desc">
<p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
<br> Sed interdum luctus erat, in Sed interdum luctus erat, in</p>
<hr2>
<span class="cast"><p><b>Scénario:</b>  Sed interdum · <b>Art:</b> Sed interdum ·  <br> 
<b>Animation:</b> Sed interdum · <b>Réalisation:</b> Sed interdum</p></span>
</div>


</div>
</div>
<div class="episode-box">
<div class="episode-img">
<img class="thumbnail-ep" src="http://image.noelshack.com/fichiers/2015/35/1440684992-img.jpg"/>
                                                    <span class="episode-nb"><p>001</p></span>
</div>

<div class="episode-single-content">
<div class="episode-single-title">
<h5><b><a href="http://google.fr">Lorem Ipsum Title</a></b></h5>
</div>
<div class="episode-single-desc">
<p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
<br> Sed interdum luctus erat, in Sed interdum luctus erat, in</p>
<hr2>
<span class="cast"><p><b>Scénario:</b>  Sed interdum · <b>Art:</b> Sed interdum ·  <br> 
<b>Animation:</b> Sed interdum · <b>Réalisation:</b> Sed interdum</p></span>
</div>


</div>
</div>
</div>

</div>

</div>
</div>
</div>
</div>
</div>

</div>


</div><!--.post-box-->

</article>

JS Fiddle Link

Answer №2

To make your design responsive, you must use a media query.

Let's say we define a class called .tall-height-on-mobile

@media screen and (max-width:767px) {
    .tall-height-on-mobile {
        height: 800px;
    }
}

This CSS code will only apply to screens with a width of less than 767px, which corresponds to the bootstrap standard for mobile or extra small (xs) devices.

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

Stop the initial expansion of the first accordion with JavaScript on page load

I have a simple accordion created using only pure javascript without jQuery and Pure CSS. Everything is functioning correctly, but the problem I am facing is that the first accordion is automatically expanded when the page loads. I have tried various metho ...

javascripthtmlcss

Adjust the color and border of the checkbox using CSS styling

Looking for a checkbox with a white background and no curve Here is what I have tried: .cb { background-color: white; border: 1px; } <input type="checkbox" class="cb">Normal <input type="checkbox" class="cb">power <input type="checkb ...

htmlcss

Using the defer attribute on my script tag has caused a delay in loading my script due to its

Whenever I include the defer and async attributes in my <script src="/all.js" async defer></script> tags, the script within the HTML page stops functioning properly due to jQuery being loaded with defer as well. To work around this issue, I hav ...

javascriptjqueryhtml

The Flex 4.6 StyleableTextField fails to recognize and render <br> and <p> tags

I am facing an issue in my mobile project with the StyleableTextField. When I fill it with HTML text using the .htmlText property, the tag works fine but simple line breaks and paragraphs are not being displayed. How can I fix this? Even the simplest H ...

htmlapache-flexmobiletagsflex4

Activate hover event on UI-Grid for interactive display

I often utilize in the following manner: <div ncy-breadcrumb class="title-shadow"></div> {{ getDeviceTree }} <div> <div ui-grid="gridOptions" ui-grid-resize-columns ui-grid-selection></div> </div> My object ...

htmlcssangularjsangular-ui-gridonhover

Utilize JavaScript to iterate through a JSON object and retrieve the indices that meet the specified criteria

While I found a previous answer that somewhat addresses my issue, I am seeking guidance on how to return an array of the indexes where a specific value appears. For example, if **18A38** is the target value, it should return the positions [1,3]. The sampl ...

javascripthtmljson

Utilizing SVG files as React components can alter the CSS inline styling variables

Within my React application, I am bringing in an SVG as a React component in the following manner: import React from "react"; import {ReactComponent as SomeSVGComponent} from "./some_svg.svg"; function SomeComponent(props){ return ...

cssreactjssvgwebpack

Strategies for concealing and revealing content within dynamically loaded AJAX data

I am attempting to show and hide data that is loaded using Ajax. $.ajax({ type: "POST", url: "/swip.php", data: {pid:sldnxtpst,sldnu:sldnu}, success: function(result) { $('.swip').prepend(result); } }); This data gets ...

javascriptjqueryhtmlajax

Why is my AngularJS application triggering two events with a single click?

<button id="voterListSearchButton" class="serachButton" ng-click="onSearchButton1Click()">find</button> This button allows users to search for specific information: $scope.onSearchButton1Click = function() { var partId = $("#partIdSearch" ...

javascripthtmlangularjscss

Blank area located at the bottom of the document

I'm having trouble designing a webpage without a scroll bar because there isn't much content to display on the page. I've tried searching for solutions and following steps to fix the issue, but I haven't had any success. If anyone can a ...

javascripthtmljquerycssbootstrap-4

"Going beyond the ordinary: An exclusive look at the Outlook newsletter design

I'm struggling with adding text and a background image to a TD in a newsletter. While the background shows up, the text is not being displayed as expected. Below is the code snippet I've been using: {if !empty($aModules.mkNews)} ...

htmlhtml-emailoutlook-2010newsletter

Update Button Visibility Based on State Change in ReactJS

Currently, I'm utilizing a Material UI button within my React application. Despite changing the state, the button remains visible on the screen. Here's the relevant code snippet: function MainPage() { const state = useSelector(state => sta ...

javascriptcssreactjsreact-hooksmaterial-ui

Bootstrap 4 limitation with Internet Explorer versions 8 and 9

When using bootstrap 4 with an MVC application, I encountered compatibility issues on Internet Explorer 8 or 9. Even after adding html shiv and <meta http-equiv="X-UA-Compatible" content="IE=edge">, all elements appear jumbled. Is there a workaround ...

c#htmlasp.net-mvcrazorbootstrap-4

Dynamically adjust the label position based on the button position

I am currently developing an interface that allows users to change the position of buttons and add a label text under the button. However, I am facing an issue where the label is not always centered below the button due to variations in the size and number ...

htmlcssangulardynamiclabel

What is the best way to ensure these 2 divs are aligned vertically in the provided html (starting at the same vertical level)?

<div class="container"> <div class="row"> <div class="col-lg-12"> <div class="news-title"> <h3 class="title">NEWS & ARTICLES</h3> ...

htmlcsstwitter-bootstrap

Retrieving the value of onCheck from the Checkbox/ListItem

Imagine I have a React.Component that displays components from material-ui: {data.map(value => ( <ListItem key={data.indexOf(value)} primaryText={value} leftCheckbox={ <Checkbox onCheck={this.pr ...

javascripthtmlreactjsmaterial-ui

Steps to display a variable in JavaScript on an HTML textarea

I'm working on a JavaScript variable called 'signature' var signature; //(Data is here) document.write(signature) Within my HTML document, I have the following: <div id="siggen"> <textarea id="content" cols="80" rows="10">& ...

javascriptjqueryhtmlcssajax

Verify if the second list item contains the "current" class

When displaying a list of blog items on the blog page, I am using grid-column: 1 / -2;. In the first row, the first blog item spans two columns while the second and subsequent rows display three items in each row. This setup works well, but when moving to ...

htmljquerycss

Working towards ensuring my website is responsive

Hello, I am a CSS beginner currently working as an intern. My task is to make a website's CSS compatible with Internet Explorer, and then make it responsive and scalable. Essentially, the design should retain its appearance when the window size change ...

javascripthtmlcss

What is the reason my CSS formatting isn't being applied in Vue.js?

As a newcomer to web development and vue.js, I've been struggling to style my code effectively. Below is an example of my vue.js code where I have created markup for a profile description using figure, figcaption, and image elements. Could you please ...

cssvue.js