Display Listings Shortcode with Responsive CSS styling

I recently added a plug-in called Display-listings-shortcode and incorporated the columns-extension feature on my website, RitaNaomi.com. This allows for blog posts to be displayed in columns halfway down the homepage when viewed on a web browser. Initially, the display appeared somewhat messy with titles appearing cramped beside and below images. However, after some tinkering, I managed to adjust the .display-posts-listing class to modify the layout.

.display-posts-listing .listing-item {padding-bottom:30;}

.listing-item
{
  float:left;
  width:22%;
  margin: 40px
  }

However, upon viewing the site on a mobile device, the columns remained horizontal rather than stacking vertically as desired. Despite attempting to use @media queries to alter this through CSS, the changes did not take effect.

I attempted to rectify this issue by using the following code within an @media handheld statement:

 .display-posts-listing .listing-item {
  clear: both;
  display: block;
   }

 .display-posts-listing img {
  float: left;
  margin: 0 10px 10px 0;
   }
   }
csswordpressplugins

Answer №1

Avoid using @media handheld {} as it has been deprecated, as per information from MDN.

Instead of that, consider targeting specific pixel-width values. You may need to use multiple queries, with some common standards being 1023px, 767px. Feel free to adjust the 900px in the example below to suit your needs.

@media only screen and ( max-width: 900px ){
   .display-posts-listing .listing-item {
       /* Your CSS Styles Here */
   }
}

Answer №2

Eliminated the custom CSS that had been previously applied in the original theme as it was causing issues with the display of columns.

Decided against using @media handheld {} due to deprecation (kudos to xhynk for pointing that out), and opted instead for the command (max-width: 768), which is where the title and image styles began to look off.

In order to ensure that the title displays on its own line on larger screens, I included this snippet in my CSS:

.display-posts-listing .listing-item .title { display: block; }

Currently utilizing the aforementioned media query to determine how to style it on smaller devices.

Here is the full CSS code: https://gist.github.com/billerickson/17149d6e77b139c868640a0ed3c73b3a

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

How can I show two unique chart modals simultaneously?

Below is the chart that I am currently working on: https://i.stack.imgur.com/bHSj6.png While I am able to display the charts separately, I am encountering difficulties when trying to display both of them on the same chart line. <!DOCTYPE html> < ...

htmlcsscanvascharts

When attempting to integrate a custom Plugin into Phonegap 3.0, an error stating "The arguments passed to path.join must be strings" occurred

I have successfully ported an older Twitter plugin to work with PG > 3.0, and it functions properly in my IDE. However, when I try to install it via NPM, I encounter errors. I have double-checked the file system structure and plugin.xml specification fo ...

pluginscordovanpm

"Can anyone provide guidance on how to initiate a css 3d animation by clicking a button

Currently, I am developing a folding hide/show animation that can be triggered using Javascript. If you would like to take a look at the code and see a working example, please visit this link: You can also view just the gist here: https://gist.github.com ...

javascriptjquerycssanimationwebkit

Creating a Unique CSS Grid Border with Custom Images

I have a client project using nextjs and the design calls for a component with a custom border on a responsive CSS grid. I've successfully created the CSS grid with all the necessary content, but I'm struggling to add the required border as per t ...

htmlcssnext.jscss-grid

Ways to display the values stored in localStorage in distinct div elements based on certain conditions

https://i.sstatic.net/BG3qd.png In my recent project, I have created a feature where users can input specific values through input fields and have them stored directly in localStorage. These values represent different tasks, such as Task: Work Description ...

javascripthtmlcss

Navigation bar remaining fixed on mobile devices

I have been working on a bootstrap site at http://soygarota.com/blog/public After checking the code multiple times, I have added the bootstrap.min.css, bootstrap.min.js, and jQuery. However, for some reason, the header navigation is not collapsing when vi ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Exploring the differences between two string variables in JavaScript

While attempting to compare two strings using JavaScript, I encountered the following code: var statuss = document.getElementById("status").innerHTML; //alert(statuss); var s =statuss.toString(); var ss= "Active"; if (s === "Active"){ aler ...

javascriptjqueryhtmlcss

Generating an HTML report that includes a header and footer on every page using Firefox

I have been trying different methods, but none of them seem to work properly. My issue is with printing a html report with a header and footer on every page specifically in Firefox. A Possible Solution: <html> <head> <title></title&g ...

htmlcssprintingmedia-queries

What is the best way to merge a card-deck with fixed-width cards?

Currently, I am using flex-mode and aiming to create a 'deck' of 'cards' with uniform height and width. My goal is to ensure that the width remains consistent across different breakpoints. Unfortunately, I have not been able to achieve ...

cssflexboxbootstrap-4

Ways to increase the count in Vue Class Bindings?

Trying to utilize Vue class bindings, but uncertain about the syntax for bindings. I aim to append a numeric value to the class attribute, for instance class = "allstar50", then employ class bindings with the v-for directive to display a list of text items ...

javascripthtmlcssvue.jsvuejs2

Why does the col-sm-* class affect the appearance on extra small screens?

For a current project, I have incorporated bootstrap into my design and have set up varying column widths for xs, sm, and md screens. Initially, I utilized col-xs-* and col-md-* to ensure the columns resized appropriately for xs, md, and lg screens. Howeve ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Struggling to show posts exclusive to a specific category on WordPress?

Struggling to display only the desired category on a Wordpress archive page. Despite using the get-category-by-slug function, all posts from every category are showing up instead. <?php $category = get_category_by_slug('weddings'); $a ...

phpwordpresscategories

creating a personalized CSS style rule

Can a custom rule be created in CSS using @media for a parent class to make changes based on the class? <div class="parentGreen"> <ul class="ul1"> <li>1</li> <li>2</li> &l ...

javascripthtmlcssangularjs

Create a dynamic image positioned alongside text specifically designed for mobile devices

One of my challenges involves implementing a responsive image in Bootstrap (3.3.7): <div class="col-sm-2 text-center"> <img class="img-responsive center-block " src="img/1.png" style="max-width: <p>I would like to include some gua ...

csstwitter-bootstraplayout

Ways to implement CSS styling for a particular HTML element

HTML: <div class="tagline">Web Portal Name</div><br /> <div id="logged_in_user_dtls" style="color:#FFF; margin-top:15px; font:bold; width:100%; position:relative; margin-left:800px;float:left;"&g ...

htmlcss

Adjustable dimensions for a collection of squares based on screen size

I am currently designing a grid composed of 1:1 squares and allowing the user to continually add more squares. My main goal is to ensure that the size of each square maintains its aspect ratio while being able to resize accordingly. The challenge lies in k ...

javascripthtmlcss

Applying CSS borders with circular corners

Can this unique border style be achieved using only CSS? https://i.sstatic.net/wMtbG.png ...

cssborder

Fixed position scrollable tabs with Material UI

I recently implemented material-ui scrollable tabs in my project, referencing the documentation at https://mui.com/material-ui/react-tabs/#scrollable-tabs. Here is a snippet of the code I used: <Tabs value={value} onChange={handleChange ...

javascriptcssreactjsmaterial-ui

Trouble with CSS: Struggling to apply margins to a line of images in React JS

I've encountered an issue where I can't seem to add margin to the row of images. The margin appears fine without any CSS when viewed on a wide screen, but once I scale it down to mobile view, the margin disappears completely. Even after attemptin ...

cssreactjssassflexbox

The Yahoo stock display is experiencing issues within two separate div elements on the webpage

Hey experts on stack overflow! I came across this script that allows me to fetch stock information from Yahoo. However, I'm facing an issue where the script only works for one div when I try to use it in multiple divs. I'm not a coder, so I&apos ...

javascriptjqueryhtmlcss