Tips for adjusting the layout of a section class using Tailwind CSS according to screen size?

I'm really struggling with implementing my latest idea and could really use some help:

I've designed this article preview section that looks amazing on small screens like mobile devices:

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

<section class="w-full md:w-2/3 flex flex-col items-center px-3">
    <article class="w-full flex flex-col shadow my-4">
    <div class="bg-white flex flex-col justify-start p-6">
            <div class="max-w"><a
                    href="#>"
                    class="text-blue-700 hover:text-blue-500 text-sm font-bold uppercase pb-4">#Tag&nbsp;#Tagg&nbsp;#TAGGG</a>
            </div>
            <a href="#"
                class="text-3xl font-bold hover:text-gray-700 pb-4">Article title</a>
            <p href="#" class="text-sm pb-3">By <a href="#" class="font-semibold hover:text-gray-800">author</a>, published at 12.03.2021
            </p>
        <div class="aspect-w-16 aspect-h-9">
        <a href="#">
            <img src="https://images.unsplash.com/photo-1614730321146-b6fa6a46bcb4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M...80&w=2000">
        </a>
        </div>
            <a href="#"
                class="pb-6 prose max-w-none">Here comes a teaser or an excerpt of the article text...</a>
            <div><a href="#"
                class="uppercase hover:font-bold text-gray-700 hover:text-black"><mark>Read more…&nbsp;<i
                    class="fas icon-arrow-right"></i></mark></a></div>
        </div>
    </article>
</section>

However, I now want to change the layout for larger screens (

md: = @media (min-width: 768px) &
) to look like this:

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

Unfortunately, my current knowledge is limited and I need assistance in making these changes. What do I need to add/change to achieve this?

Click here for the Playground link

cssflexboxresponsive-designtailwind-css

Answer №1

To simplify achieving this goal, consider using two images and hiding one based on the screen size.

For larger screens, hide the left-aligned image using the following classes:

hidden md:block

The md:block class takes precedence over hidden.

The inline image is hidden on larger screens with:

md:hidden

Here's a playground I created for you (also eliminated unnecessary classes and tags)

I aligned the image to the left using grid and grid-cols. Other methods exist to achieve the same result.

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

Struggling to align content vertically within an article and in need of some guidance

Still struggling with vertical alignment of content within an article. I've tried using tables and the vertical-align property but can't seem to make it work. Any suggestions for centering the content responsively on the right-hand side? The lef ...

htmlcss

How to emphasize a clicked hyperlink in AngularJS

Here's the HTML code I've been working on: <div id="Navigation" class="md-dialog-full"> <div class="products-options"> <a ng-click='addType("Physical")' href="javascript:void(0);"> < ...

javascripthtmlcssangularjs

Using varied colors to style list items

Is there a way to apply three different colors to my list items? What is the best method for achieving this? This is what I have in my code: li { width: 33.333%; float: left; padding: 15px; list-style: none; } .light { background-color: #0 ...

htmlcss

Ways to implement a delay in a function?

I'm looking for a way to introduce a delay in my function. Should I enclose the function within a delay function, or is there a different method to ensure that the animation doesn't trigger until 5 seconds after the page has loaded? var textTo ...

javascriptjqueryhtmlcss

Issue with Accordion Panel Content Scroll Bar

Hello there, I've encountered a puzzling problem with my website. My objective is to insert a Time.ly Calendar widget into one panel of my accordion. On this page, "TOURNAMENTS: , the widget appears exactly as desired. However, when I replicate the c ...

javascripthtmlcssscrollaccordion

Display and conceal individual divs using jQuery

Despite my lack of experience with jQuery, I am struggling with even the simplest tasks. The goal is to display/hide specific messages when certain icons are clicked. Here is the HTML code: <div class="container"> <div class="r ...

javascripthtmljquerycssjquery-events

jQuery - accessing a different class within the object

Let me explain the scenario: I have a website that will delve into 4 different subjects. Initially, I have 4 divs each representing the title of those subjects. For instance, <div><p> Physics </p></div> <div><p> Chem ...

javascriptjqueryhtmlcss

Challenge encountered in handling AJAX response data for presentation

Currently, I am immersed in a project and decided to implement AJAX for smoother form submissions. My initial attempt was trying to display text from a .txt file below the "submit" button, but unfortunately, that approach didn't yield the desired resu ...

javascriptphphtmlcssajax

Is there a way to ensure the alignment of items remains consistent, especially for the rightmost column, by enclosing them within a div element?

I'm currently working with Vue.js and using a UI component framework designed for it. I'm facing an issue where aligning numbers like 500 or 5000, as well as icons, is proving to be difficult. The numbers in the rightmost column need to be aligne ...

htmlcssvue.jsvuetify.js

data-icon not displaying correctly in Firefox and Chrome browsers

Can anyone explain why this code works in Safari, but not in Firefox and Chrome? Here is the HTML: <input type="search" placeholder="Search" id="search" name="search" id="s" data-icon="s"> And here is the CSS: #search[data-icon]:before { font ...

htmlcss

An issue occurred during the compilation of an Angular6 project

I am embarking on my first Angular project and may not grasp every detail perfectly. In my search for guidance, I came across the command "ng build --prod" on Google and decided to give it a try. Everything seemed to be going smoothly at first until an err ...

htmlcssangularwebng-build

The text next to images is being clipped (is it CSS?)

Encountering a problem with CSS on my Wordpress websites. Using WP's editor to float images to the right or left of text, I noticed an issue when viewed on mobile: https://i.sstatic.net/gVFRq.jpg The text gets cut off. How can I ensure that no tex ...

csswordpress

Using various colors to highlight specific sections of a letter or number

I am striving to recreate the unique image shown below, particularly interested in achieving the multi-colored effect on the numbers. This aspect of having different colors for parts of the number is intriguing and I would love to learn how it's done. ...

javascripthtmlcss

Enable automatic scrolling for CSS overflow: scroll feature

I am currently developing a chat application where messages are displayed in a background. I have used CSS to add an overflow scrollbar with the line overflow-y: scroll;. Everything is working properly, but I'm wondering if there is a way to automatic ...

javascripthtmlcssscrollbaroverflow

Issue with presenting the scrollbar alongside the Dropdown menu

I'm in the process of creating a menu with multiple items and sub-items. I'd like to have a scroll bar appear alongside the items if they become too numerous. The same goes for sub-menus and so forth. Check out this example to see what I mean. ...

htmlcssmenu

Display or conceal a division underneath a dropdown menu based on selections retrieved from a SQL Server database

Presented here is my JavaScript code. function appendItemforPurchaseOrder() { debugger var rowNumber = parseInt($(".itemmapContainer").attr("data-rownumber")); rowNumber = isNaN(rowNumber) ? 1 : rowNumber + 1; var addNewItemDetailHtml = ...

javascripthtmlcssasp.net-mvcvisual-studio-2017

Exploring Website Layouts Across Various Screen Resolutions

I am facing an issue with my website layout. While it looks great on a 20" screen, on an 11" screen the elements are not displaying correctly. The #logo is overlapping the #menu, and the #bubble is appearing below the #frame. I had set percentage size para ...

htmlcssresolution

Maintain the structure of the slick slider during transitions

I am working with the slick slider and aiming to achieve a specific layout for the slider itself. What I require is a structure that looks like this: div div div div div I have managed to implement this design successfully, bu ...

javascriptjqueryhtmlcssslick.js

CSS - vertical and horizontal lines vary in thickness depending on the design

I am working on creating a grid that is automatically generated in my Angular 2 application. Currently, it consists of 1px wide divs as vertical lines and 1px high divs as horizontal lines. However, there seems to be an issue with inconsistent thickness be ...

htmlcss

Adjusting the height of an element in AngularJS based on its width dynamically

I am working on a table that is generated using ng-repeat, and I want to ensure that each td in the tbody is square. Since all the tds have an equal width, I only need to adjust the first one. However, the size of the table and td will change when the wind ...

javascriptcssangularjs