Placement of the image is not above the card (nth-of-type(odd)) when viewed on smaller screens

I have a set of cards that display an image either on the left or right side, depending on whether it's an odd or even numbered card. On smaller screens, only the even numbered cards show the image at the top, while the odd numbered cards hide the image.

The code snippet demonstrates this behavior. When viewing in full screen, all four images are visible, but upon reducing the viewport size, only the images of the even numbered cards move to the top.

I am having trouble identifying the cause of this issue, but I suspect it has something to do with my use of the :nth-of-type() CSS pseudo-class. Any suggestions on how to correct this?

Kind regards

.blog-card {
  display: flex;
  flex-direction: column;
  margin: 1rem auto;
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .07), 0 6px 18px -1px rgba(0, 0, 0, .04);
  margin-bottom: 1.6%;
  background: #fff;
  line-height: 1.5;
  border-radius: 0;
  overflow: hidden;
  z-index: 0;
}

.blog-card:nth-of-type(odd) {
  flex-direction: row-reverse;
}

.blog-card:nth-of-type(odd) .description:before {
  left: inherit;
  right: -10px;
  transform: skew(3deg);
}

.blog-card:hover .photo {
  transform: scale(1.1) rotate(3deg);
}

.blog-card .meta {
  position: relative;
  z-index: 0;
  height: 200px;
}

/* Additional styling rules... */

@media (min-width: 640px) {
  /* Responsive styling for larger viewports */
}


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9dfff2f2e9eee9effceddda9b3aeb3ac">[email protected]</a>/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.usebootstrap.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<h2>Cards</h2>

<hr>

<!-- Card HTML structure with meta and description sections -->

htmlcssimagecard

Answer №1

Modify the CSS code to change the flex-direction of .blog-card:nth-of-type(odd) to column on mobile devices

.blog-card {
  display: flex;
  flex-direction: column; /* Updated */
  margin: 1rem auto;
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .07), 0 6px 18px -1px rgba(0, 0, 0, .04);
  margin-bottom: 1.6%;
  background: #fff;
  line-height: 1.5;
  border-radius: 0;
  overflow: hidden;
  z-index: 0;
}

.blog-card:nth-of-type(odd) {
  flex-direction: row-reverse;
}
/* Other existing CSS styles remain unchanged */

@media (max-width: 639px) {
.blog-card:nth-of-type(odd) {
  flex-direction: column; /* Feature added */
}

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b3934342f282f293a2b1b6f7568756a">[email protected]</a>/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.usebootstrap.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<h2>Cards</h2>

<hr>
<!-- Sample HTML content with blog cards -->

Answer №2

To style the odd cards differently, implement a media query that will change their layout direction up to a specific screen size:

@media screen and (min-width: 768px){ //Feel free to customize values
  .blog-card:nth-of-type(odd) {
    flex-direction: row-reverse;
  }
}

This way, the design change will only take effect on the selected viewport.

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

Retrieving text that has been HTML-escaped from a textarea using jQuery

Within my HTML file, I have a <textarea id="mytextarea"></textarea>. Suppose a user inputs the following text: <hello>, world! How can I retrieve res = "&lt;hello&gt;, world!"; based on the user's input? The current code s ...

javascriptjqueryhtmlfunction

What is the best way to make an HTML element's width automatically adjust based on the margin size?

I'm currently working on creating a rectangular button using HTML and CSS. The challenge I'm facing is ensuring that the width of the button remains consistent regardless of the amount of text it contains. Whether it's just a few words or mu ...

htmlcss

Modify the c3 axis labels using CSS

I've been using the c3 package in R, which serves as a wrapper for the C3 javascript charting library created by Masayuki Tanaka. One issue I encountered is that my c3 chart was cutting off the last date on the x-axis. After inspecting it in Chrome I ...

cssrc3.js

How to Use Django to Load a Text File into an HTML File with the Help of

I came across an interesting code example on a website called w3schools.com that I would like to incorporate into my Django project. The code utilizes the jquery load() function to load a text file into an HTML file. Here is a snippet of the code: <!DOC ...

javascripthtmljquerydjango

What is the process for customizing the color of the focused label in Material UI through styling?

Recently, I delved into the world of JSS for styling and ran into an intriguing issue. My goal was to modify the color of a label in an InputLabel component when it is in focus state. After some tinkering, I managed to achieve this using the code snippet b ...

cssreactjsmaterial-uijss

Issues with SVG Image Mask in Firefox and IE: How to Fix Them

Creating a mask with a PNG (black circle, transparent background) and using -webkit-mask-image:url(images/mask.png) has been easy for browsers like Chrome. However, I've been encountering significant difficulties in getting the mask to display properl ...

csssvgxhtml

Discover how to effortlessly unveil JSON data by clicking on data retrieved from an API

After successfully parsing data from a Tumblr API, I encountered an issue when introducing tags within the body description, which includes images and hyperlinks. The main task at hand is to create a list of blog titles where the corresponding blog descri ...

jqueryhtmljsonajaxapi

Exploring the application of URL parameters in HTML code

How can I use URL parameters retrieved with Javascript in my HTML? <script> var url_string = window.location.href; //window.location.href var url = new URL(url_string); var c = url.searchParams.get("name"); console.log(c); </script> I am tryi ...

javascripthtmlurlweb

Design a dynamic card with an eye-catching Font Awesome icon that adapts well to

As I delve into the realm of CSS, my current mission is to replicate the captivating cards showcased on this particular website. Utilizing Font Awesome icons has become a pivotal aspect of this endeavor. For instance, let's take a look at this card:ht ...

htmlcssbootstrap-4font-awesome

Tips on assigning a default value to an HTML <select> tag using information fetched from a database

I am currently working on setting the default value of a dropdown element in HTML using data retrieved from an SQL database. I have successfully extracted the values from the database and stored them in variables. Here is the code snippet of what I have ac ...

phphtmlselect

Exploring the Power of the "Required" Attribute in HTML 5 Along

I'm currently working on a form and here is the code snippet... <table width="100%" border="0"> <tr> <td class="text-1" height="43" width="40%">Full Name :<font color="#ff3a00">*</font></td> ...

regexhtml

When displaying text pulled from MYSQL in a div, white space is eliminated

I'm attempting to display a string that contains both spaces and line breaks. When I output the string as a value in an input field, the spaces are displayed correctly. <textarea rows={15} value={content} /> However, when I try to display ...

javascripthtmlreactjs

Using jQuery and CSS to change to "loading" status

My current setup includes the following: <div class="click red"></div> <div class="click green"></div> <div class="click blue"></div> When the "click" is clicked, I want to add the class "load" to the div. I have succe ...

jquerycss

AngularJS: When the expression is evaluated, it is showing up as the literal {{expression}} text instead of

Resolved: With the help of @Sajeetharan, it was pinpointed that the function GenerateRef was faulty and causing the issue. Although this is a common query, I have not had success in resolving my problem with displaying {{}} to show the outcome. I am atte ...

htmlangularjsweb-applications

The validation of radio input signals results in an error being returned

For a while now, I've been trying to solve the issue with radio button validation in my current project. Surprisingly, it works fine when there are no other functions in the form besides the radio buttons themselves. I suspect that the problem lies wi ...

javascripthtmlvalidation

Is there a way to modify the text color of the navigation bar in Bootstrap?

How can I customize the text color of the navigation links in my Bootstrap navbar? I want to specifically change the color of the nav-links to purple while keeping the main title on the left unchanged. Here is the code snippet: <!DOCTYPE html> < ...

htmlbootstrap-4

Modifying the opacity of the placeholder in Stripe Element is not possible

The placeholders of Stripe React elements come with a CSS property Opacity: 1. Unfortunately, this property cannot be modified using the style object. However, other ::placeholder CSS properties can be adjusted as needed. Style Object: const iframeStyles ...

cssreactjsfrontendstripe-paymentspayment

Converting a JS string into HTML markup

I recently developed a basic web application to manage telnet connections with routers using Node.js, Express, and WebSockets. After establishing a connection, the terminal stream is transmitted through a websocket as UTF-8 strings. However, my current is ...

javascripthtmlutf-8

Accessing node modules in the index.html file located in the public directory

Is there a way to access node_modules, such as Angular, from my index.html file? This is the current file structure: node_modules public jsfolder cssfolder index.html server.js I am aware that this code snippet does not work in index.html: <scri ...

angularjsnode.jshtmlnode-modules

What is causing my `<nav>` buttons to be left-aligned?

The attempt to center the buttons in the viewport using text-align:center for nav, ul, and li has proved ineffective. The alternative of nav {text-align: left;} was no more successful. CSS Snippets: #container { width: 100%; background-color: bla ...

htmlcss