Flip the image to the left and right interchangeably

I have been trying to dynamically add elements to a webpage using php. My goal is to have the images alternate between left and right for each item.

Even after experimenting with nth odd/even, I still can't seem to make it work.

Could there be something crucial that I'm overlooking?

For clarity, here is an example of what will be generated from my php code. I intend for the first image to appear on the left side and the second image on the right side.

htmlcssflexbox

Answer №1

For a different image position, try implementing display:flex in the .card-left class and using flex-direction: row-reverse with the :nth-child(even) selector.

.package {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.card-left {
  background: #e9e9e9;
  position: relative;
  margin-bottom: 40px;
  font-size: 0;
  box-sizing: border-box;
  display: flex;
}

.package:nth-child(even) .card-left {
  flex-direction: row-reverse;
}

.col-img {
  font-size: 16px;
  width: 58.333333%;
  height: 100%;
  position: relative;
  -webkit-transition: width 1s ease;
  -moz-transition: width 1s ease;
  -o-transition: width 1s ease;
  transition: width 1s ease;
  box-sizing: border-box;
}

.col-img img {
  max-width: 100%;
  height: auto;
  cursor: pointer;
  position: relative;
}

.col-content {
  font-size: 16px;
  padding: 2%;
  height: 100%;
  position: relative;
  -webkit-transition: width 1s ease;
  -moz-transition: width 1s ease;
  -o-transition: width 1s ease;
  transition: width 1s ease;
  width: 41.666667%;
  box-sizing: border-box;
}

.packages {
  padding: 0 2%;
  display: table;
  table-layout: fixed;
  width: 100%;
  max-width: 1300px;
  position: relative;
  margin: 0 auto;
}

.col-content h3 {
  color: #6f6ab2;
}

.col-content h5 {
  color: #ccae4c !important;
}
<div class="package">
  <!-- card -->
  <div class="card-left">
    <div class="col-img">
      <img src="https://www.box.com/sites/default/files/img/social/box1200x630.jpg"> </div>
    <div class="col-content">
      <h3>Fake Room Package for Testing</h3>
      <h5> This is a custom headline! </h5>
      <p> </p>
      <p>Spicy jalapeno bacon ipsum dolor amet andouille t-bone tail, shankle meatloaf jowl jerky. Tongue shank cupim, sirloin flank pork chop capicola. Short ribs short loin doner corned beef pastrami. Leberkas beef jowl venison burgdoggen pork chop chuck
        pork belly bresaola turducken ham hock sirloin kevin porchetta rump. Alcatra shank pig tenderloin, cow meatloaf strip steak prosciutto. Ground round meatball fatback shankle strip steak pork chop shank cupim tail beef alcatra beef ribs.</p>
      <p></p> <a class="btn purple" href="#" target="_blank"><span>Check Availability</span></a>
    </div>
  </div>
</div>
<div class="package">
  <div class="card-left">
    <div class="col-img">
      <img src="https://www.box.com/sites/default/files/img/social/box1200x630.jpg"> </div>
    <div class="col-content">
      <h3>Fake Room Package for Testing</h3>
      <h5> This is a custom headline! </h5>
      <p> </p>
      <p>Spicy jalapeno bacon ipsum dolor amet andouille t-bone tail, shankle meatloaf jowl jerky. Tongue shank cupim, sirloin flank pork chop capicola. Short ribs short loin doner corned beef pastrami. Leberkas beef jowl venison burgdoggen pork chop chuck
        pork belly bresaola turducken ham hock sirloin kevin porchetta rump. Alcatra shank pig tenderloin, cow meatloaf strip steak prosciutto. Ground round meatball fatback shankle strip steak pork chop shank cupim tail beef alcatra beef ribs.</p>
      <p></p> <a class="btn purple" href="#" target="_blank"><span>Check Availability</span></a>
    </div>
  </div>
</div>

Answer №2

To easily achieve this effect, utilize the existing code and apply the CSS rule .package:nth-child(even) .col-img { float: right; }

.package {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.package:nth-child(even) .col-img {
  float: right;
}

.card-left {
  background: #e9e9e9;
  position: relative;
  margin-bottom: 40px;
  font-size: 0;
  box-sizing: border-box;
}

.col-img {
  display: inline-block !important;
  font-size: 16px;
  width: 58.333333%;
  height: 100%;
  position: relative;
  vertical-align: top;
  -webkit-transition: width 1s ease;
  -moz-transition: width 1s ease;
  -o-transition: width 1s ease;
  transition: width 1s ease;
  box-sizing: border-box;
}

.col-img img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  cursor: pointer;
  display: inline-block;
  position: relative;
  zoom: 1;
}

.col-content {
  display: inline-block !important;
  font-size: 16px;
  padding: 2%;
  height: 100%;
  position: relative;
  vertical-align: top;
  -webkit-transition: width 1s ease;
  -moz-transition: width 1s ease;
  -o-transition: width 1s ease;
  transition: width 1s ease;
  width: 41.666667%;
  box-sizing: border-box;
}

.packages {
  padding: 0 2%;
  display: table;
  table-layout: fixed;
  width: 100%;
  max-width: 1300px;
  position: relative;
  margin: 0 auto;
}

.col-content h3 {
  color: #6f6ab2;
}

.col-content h5 {
  color: #ccae4c !important;
}
<div class="packages">


  <div class="package">
    <!-- card -->
    <div class="card-left">
      <div class="col-img">
        <img src="https://www.box.com/sites/default/files/img/social/box1200x630.jpg"> </div>
      <div class="col-content">
        <h3>Fake Room Package for Testing</h3>
        <h5> This is a custom headline! </h5>
        <p> </p>
        <p>Spicy jalapeno bacon ipsum dolor amet andouille t-bone tail, shankle meatloaf jowl jerky. Tongue shank cupim, sirloin flank pork chop capicola. Short ribs short loin doner corned beef pastrami. Leberkas beef jowl venison burgdoggen pork chop chuck
          pork belly bresaola turducken ham hock sirloin kevin porchetta rump. Alcatra shank pig tenderloin, cow meatloaf strip steak prosciutto. Ground round meatball fatback shankle strip steak pork chop shank cupim tail beef alcatra beef ribs.</p>


        <p></p> <a class="btn purple" href="#" target="_blank"><span>Check Availability</span></a>
      </div>

    </div>
    <!-- end card -->
  </div>


</div>

Answer №3

This code snippet defines a CSS layout for displaying room packages with images and content in cards on a webpage. The design includes structured elements like package, card-left, col-img, and col-content to create an organized layout. The CSS styles ensure that the package display is responsive and visually appealing. It specifies the dimensions, positioning, transitions, and color schemes for different elements within the package layout. Additionally, it includes some custom styling for the h3 and h5 headings to enhance the visual presentation further. Each card showcases a room package with a title, personalized description, image, and a button for viewing availability. This setup allows for easy customization and updating of room packages on the website. Overall, this code snippet provides a well-structured and visually pleasing layout for showcasing room packages on a website.

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

"Error: Unable to locate CSS background image file: net::ERR_FILE_NOT_FOUND

I currently have a background image set for the bottom of the header as shown below: header { background:url(../img/header_bg.png) #ea6225 no-repeat; background-size: 100% auto; background-position:left bottom; } The images are located in a folder ...

htmlcss

What is the best way to implement rounded borders using CSS?

Can we use the latest CSS standards to create rounded borders? Unfortunately, this feature is only available in CSS level 3 and above. ...

cssborder

Unable to utilize JQuery function for selecting dynamically generated textbox

In the table's body, I am dynamically passing a table from a JavaScript file. For a column, I have returned a textbox as shown below: function (oObj) { return '<div id=\"uniform-chkPerOverage\"> <span ><input t ...

jqueryhtmlasp.net

Attempting to retrieve the value of "id" using a "for...of" loop

I am seeking assistance with my auditTime function. In the loop using "for . . of", each element of the div HTML collection with the class name "time-block" should be iterated through, and the number value of that div's id should be assigned to the va ...

javascripthtmljquerycss

Customizing the color of the navbar dropdown click event in Bootstrap with a bootswatch theme

I am currently struggling to change the color of a navbar dropdown click color. I am working with a theme that alters Bootstrap colors, specifically the Journal theme. To better illustrate the problem, here is a video link: Below is my code: <nav cla ...

htmlbootstrap-4

Display a text box upon clicking an item

I've been curious about how to create the effect of a text box or div that appears when clicked on, similar to what you see in this. Scroll down and click on "show patchnotes"; I've been puzzled by this for a while but haven't come across a ...

javascriptjqueryhtml

React component with element style declared in module.css file and conditional state

I'm in the process of developing a mobile dropdown feature for a React web application. I am looking for guidance on the proper syntax to use when incorporating multiple classes into a React element. My goal is to apply styles from an imported module ...

cssreactjsclassnext.jsclassname

Javascript time conflict dilemma

Currently, I am working on the add task module for my project. I need to ensure that whenever a task is added, it does not overlap with existing tasks. I have almost completed this functionality, but I have encountered a problem specifically with time over ...

javascriptjqueryjsonhtml

Creating a logo slider using CSS - A step-by-step guide

I attempted creating a logo slider using Owl carousel. Unfortunately, the carousel isn't showing up. Here's how I envision my carousel to appear: https://i.sstatic.net/scDtT.png This is the HTML code I used: <div class="owl-carousel"> ...

jqueryhtmlcssslidercarousel

What is the best way to customize the woocommerce.css file in the parent theme?

Currently, I have incorporated an ecommerce-friendly wordpress theme for my website in conjunction with woocommerce. To customize the design, I created a child theme and transferred the woocommerce.css file from the plugin into the css of the child theme, ...

csswordpresswoocommerce

jQuery if statement appears to be malfunctioning

When the condition operates alone, everything works fine. However, when I introduce an 'and' operation, it does not function correctly. If only one of them is true, the code works. It also successfully takes input values. <!DOCTYPE HTML Code ...

javascriptphpjqueryhtml

Start the embedded YouTube live stream on autoplay

When it comes to autoplaying a regular YouTube video, there are various solutions available. However, these methods do not always work for livestreams. I attempted to automatically click the embedded link using the following code: <script> var els = ...

javascripthtml

GZIP compression causes a total page layout malfunction

Thank you for taking the time to visit. I've been attempting to tackle this issue on my own, but it seems to be a bit overwhelming for me once again. THE SCENARIO... I have my website live on a shared hosting platform. As I delved into compressing my ...

css.htaccesscompressiongzipzlib

Unable to obtain the width of images on Chrome browser

I've been developing a basic slider that moves images from right to left. It's functioning properly on Firefox, but I'm encountering an issue with Chrome when trying to obtain the width of the images. $(window).load(function() { // Loa ...

javascriptjqueryhtmlcssgoogle-chrome

Tips for showcasing a Bootstrap alert

I'm attempting to integrate Bootstrap Alerts into my project, but I'm struggling to display them programmatically. Here is the HTML snippet: <div class="alert alert-success alert-dismissible fade show" role="alert" id="accepted-meal-al ...

javascriptjquerycsstwitter-bootstrap

Additional cushioning is added when utilizing the X-UA-Compatible meta tag

After experimenting with various meta tags in the <head> section of my static HTML page, I have found that using <meta http-equiv="X-UA-Compatible" content="IE=edge" /> allows me to access newer CSS elements such as table:last-of-type in IE9. ...

htmlinternet-explorermeta-tagsx-ua-compatibleblank-line

What is the best way to switch the site header in JavaScript or jQuery?

I have created a Bootstrap menu design and I am looking to add a sliding functionality to it. My goal is to hide the menu when scrolling down and display it when scrolling up (slide-down / slide-up). For implementing this feature, I plan to utilize jQuery ...

javascripthtmljquerybootstrap-4

JS-generated elements do not automatically wrap to the next line

For my first project, I've been working on a to-do list and encountered an issue. When I create a new div with user input, I expect it to start on a new line but it remains stuck on the same line. Can anyone point out where I might have gone wrong? I ...

javascripthtmlcss

The checkbox styles in Tailwind CSS seem to be malfunctioning and are not

In my Next.js project, I encountered an issue with a checkbox where certain Tailwind utility classes were not being applied. Despite trying to modify the color, background, and border properties, nothing seemed to change except for width, height, and curso ...

htmlcheckboxnext.jsjsxtailwind-css

What could be the reason for the d-flex class in bootstraps preventing my div from expanding to 100% width?

I have a div where I need to display two elements next to each other: a search input field and the corresponding submit button. My attempt so far was to achieve this using the following code: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn. ...

htmlcssflexboxbootstrap-4