"Troubleshooting a Placement Concern within the ExpressionEngine Content Management System

I am facing a positioning problem with my ExpressionEngine. If you click here, you will see that I am looping elements within the 

<div id="services-container">
. The loop works fine on the first row, but misaligns on the second row. I have tried using the switch="" tag to assign individual classes for each loop as shown below:

{exp:channel:entries channel="services" dynamic="no" sort="asc|desc"}
    <div id="services-container" class="{switch='1|2|3|4|5|6'}">
        <div class="service-content">
            <img src="{service_image}" alt="banner" alt="{alt}" class="service-banner">
            <p>{service_head_line}</p>
            {service_listed_items}
            <ul class="service-credentials">
                <li>{service_list_1}</li>
                <li>{service_list_2}</li>
                <li>{service_list_3}</li>
            </ul>

            <ul class="service-credentials">
                <li>{service_list_4}</li>
                <li>{service_list_5}</li>
                <li>{service_list_6}</li>
            </ul>
            <a href="#">View related projects &raquo;</a>
            {/service_listed_items}
        </div><!--service-content-->
    </div><!--SERVICES CONTAINER-->
    {/exp:channel:entries}

However, when I try to target these classes in my stylesheet, nothing seems to be happening. Can anyone help me figure out what I might be doing wrong?

javascripthtmlcsscontent-management-systemexpressionengine

Answer №1

Dealing with both ExpressionEngine and css, the task at hand is to construct a grid with 3 elements in each row, correct?

For each of these "rows," a float containment strategy must be implemented, given that they only consist of 3 floated items. One approach would involve utilizing the switch parameter:

{exp:channel:entries channel="services" dynamic="no" orderby="date" sort="asc"}
        {if "{switch='one|two|three'}" == "one"}<div class="row">{/if}
                <div class="item">
                        ...code...          
                </div>
        {if "{switch='one|two|three'}" == "three" || count == total_results}</div>{/if}
{/exp:channel:entries}

This code snippet will insert a div with the class of row every time three items are encountered within that loop.

Furthermore, if your items are floated, it is imperative for your rows to incorporate a float clearing strategy such as overflow:hidden; or a clearfix method.

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

Unable to locate module in Node.js - module.js

I encountered an error while running the node server which states: $ node server.js module.js:339 throw err; ^ Error: Cannot find module './server/routes' at Function.Module._resolveFilename (module.js:337:15) at Function.Module ...

javascriptnode.jsnpm

Displaying both the label and store ID in Jquery autocomplete data

I have implemented jQuery UI autocomplete with an AJAX source on my input field. The goal is to display the label to the user, while storing the corresponding ID in the value behind the scenes without using a hidden field. I aim to achieve this by storing ...

javascriptphpjqueryajaxautocomplete

Adjusting div height as you scroll down the page

Hello, I am new to CSS and I have encountered an issue with setting the height of a div element to 100%. When the list on my page exceeds the size of the page, the div is no longer visible when scrolling. Do you have any ideas on how to fix this? Here is t ...

cssasp.net-mvc

How can I locate the element immediately preceding $(this)?

Struggling to retrieve the value of the $(.subname) when the .bigadminbutton is clicked and calling the updateSub() function. I have tried various methods like prev, sibling, parent, children, find, but none seem to work. This minor task is taking up too ...

javascriptjqueryjquery-selectorsselector

What could be causing the malfunction in one of the functions within my JavaScript code?

As a JavaScript beginner, I am currently working on creating a To-do App with JavaScript. Most of the functions are functioning perfectly except for one called doneTask at line 36. Despite numerous attempts to identify the issue, I have been unsuccessful s ...

javascripthtmlcss

What is the best way to ensure that my text is perfectly centered both horizontally and vertically within this DIV?

What's the best way to vertically and horizontally center text? Here is an example code that needs to be centered: <div style="display: block; height: 25px;"> <span id="ctl_txt" style="background-color: rgb(255, 0, 0);"> Basic ...

css

Tips for aligning two columns of listed items vertically with Bootstrap 5 or CSS

Having difficulty aligning two columns containing text - specifically, two lists. The goal is to have both columns on the same row with centered lists and their respective items aligned as normal bullet points. Any advice would be greatly appreciated. C ...

htmlcssalignmentbootstrap-5

Can we incorporate various CSS libraries for individual components on our React site?

Let's say, I want to use different CSS libraries for each of my components - Home, About, Contact. Would it be feasible to utilize material ui for Home, semantic ui for About, and bootstrap for Contact? If so, what is the process for incorporating t ...

javascriptcssreactjsmaterial-uisemantic-ui

Node.js: Verifying the user's previous login status using Passport

My current express router for users handles user logins using a token system: var express = require('express'); var router = express.Router(); var passport = require('passport'); var User = require('../models/user'); var Veri ...

javascriptnode.jsexpresspassport.js

Having trouble importing Angular flex-layout into my feature module

I'm facing an issue with Angular flex-layout in one of my modules. It works perfectly fine when I import flex-layout in the app module, but only for the app component. However, when I import flex-layout in another module, it doesn't seem to work ...

javascriptangularangular-materialangular-flex-layout

What is the best way to send a POST parameter using JavaScript?

Attempting to submit a variable and its name through a form, I had to change the button type to "button" instead of "submit" for additional validation purposes. Here is the updated button: <button type="button" onclick="subForm()" name="del" id="delet ...

phpjavascripthtml

AngularJS $routeProvider is experiencing difficulties with its routing functionality

I am a beginner with Angular and I'm trying to understand how multiple routes can lead to the same view/templateUrl and controller. This is what I have written: angular .module('mwsApp', [ 'ngAnimate', 'ngCookies&ap ...

javascriptangularjshtml5mode

Issue with Laravel: Scripts and image sources are not functioning properly in layouts when utilizing URLs with prefixes

Path Route::group(array('before' => 'guest'), function() { // landing page Route::get('/', array('uses' => 'HomeController@home', 'as' => 'home')); Route::get(&apo ...

phpcsstwitter-bootstraplaravellaravel-4

Ways to Execute the Constructor or ngOnInit Multiple Times

Here's the scenario I'm facing: I have developed an app with multiple screens. One of these screens displays a list of articles. When a user clicks on an article, they are directed to another screen that shows the details of that specific item. ...

javascriptangularionic-frameworkangular-ui-routerionic-native

The table printing settings are not compatible with portrait and landscape orientations

I am facing an issue with printing a table on my webpage. When I try to print using Control+P or window.print();, the width of the table does not adjust properly for portrait or landscape orientation. The table ends up exceeding the paper width. How can I ...

htmlcsshtml-tablemedia-queries

The Google Charts Pie chart is shown as displaying "Other" at 100% instead of specific data

I've encountered an issue while using the Google Charts API to create a dynamic pie chart. Initially, everything was working smoothly as the chart displayed each segment accurately. However, upon adding more data, the pie chart started showing only on ...

javascriptjsongoogle-visualization

Leveraging the Firebase email trigger extension with JavaScript

Recently, I integrated the email trigger extension for Firebase. Below is the function I am using: firestore .collection("profiledata") .doc(user.uid) .update({ accountStatus: "active", }) .then(() => { // At this p ...

javascriptfirebasegoogle-cloud-firestore

JavaScript: Automatically retrieving the if else function

I need help automating the calculation of the number of days a person worked based on their "in-time" and "out-time". I've tried to implement this in my JS code, but it's not working as expected. HTML <fieldset> In-Time: <input clas ...

javascriptphphtml

Troubleshooting: @media query's max-width CSS property not functioning as expected

(The styling works on all browsers except Chrome) I am trying to apply a specific style only when the browser width is less than 1400px Unfortunately, using max-width is not producing the desired effect @media only screen and (max-width:1400px) { .head ...

htmlcssmedia-queries

Step-by-step guide on crafting a background design similar to the one depicted in the image

How can I add a background color of #F74422 in the top right corner of my HTML page? https://i.sstatic.net/3fn1s.png ...

htmlcssbackground-color