I just bought this theme and I'm looking to customize it so that only three items appear in a row on the homepage instead of four. Can this be achieved with CSS or JQuery? Here is the link to the theme: Here is the link
Is it possible to use CSS to change the number of items displayed to three?
Step 1: If you want to control the number of blocks shown per line, adjust the width of each item as demonstrated below:
.items li {
padding: 7px;
width: 30%; /*You can also use px values here. For pixels, consider a value higher than 290px. */
text-align: left;
position: relative;
float: left;
min-height: 210px;
margin: 0 3px 5px 1px;
}
Step 2: To horizontally center the image in each block, include margin like so:
.items .thumbnail {
width: 228px;
height: 108px;
margin: 0px auto; /*This line centers the image horizontally.*/
}
To achieve the desired result, you will need to modify your CSS class.
For example,
.articles li {
float: left;
margin: 0 3px 5px 1px;
min-height: 210px;
padding: 7px;
position: relative;
text-align: left;
width: 310px; /* Increase this value */
}
I hope this solution works for you.
A contemporary approach might be:
.articles li {
padding: 7px;
width: 308px;
text-align: left;
position: relative;
float: left;
min-height: 210px;
margin: 0 9px 9px 0;
}
.articles li:nth-child(3n) {margin-right:0;}
This configuration will result in the following layout:
To ensure compatibility with older browsers, you can utilize this small jQuery script:
$(".articles li:nth-child(3n)").css("margin-right", 0);
Make sure to include the following code snippet:
.articles li:nth-child(n) {
margin-left: 30px;
margin-right: 50px;
}
By adding this, you will achieve the desired outcome:
On my webpage, I have a paragraph system (parsys) with a component that contains two inner paragraph systems. When I try to add a rich text component to each of these inner paragraph systems, the components overlap and become uneditable. Is it possible t ...
Currently, I've been diving into creating a navbar and wrestling with some jQuery code that was passed my way. I'll be sharing my code below, along with a Codepen link (https://codepen.io/JustNayWillo/pen/aXpKbb) for a better understanding of th ...
I need some assistance with Javascript, as I am not very proficient in it. I have created a CSS code that displays an announcement when the webpage loads, along with a close button to hide the entire CSS and its contents using JQuery animate. My goal is t ...
Currently working on a jQuery Mobile application that aims to achieve a similar output as shown in this image: https://i.sstatic.net/CfUHB.png The HTML code responsible for generating the image is as follows: <ul data-role="listview" data-i ...
In my ASP.NET Mvc 2 application, I have a grid of user info. When a user is clicked, a jQuery Modal dialog opens allowing me to edit and save the user's information successfully. I am now looking for assistance on implementing validation on this moda ...
I need assistance with styling a form that contains a radio button. I'm looking to customize the appearance of the radio button by adding a background image and also changing the default view of the check image. Additionally, I want the form to be cen ...
I am looking for a JavaScript function that will add the class "current_highlight" when an element with the class "activo2" also has the class "active". Here is my HTML code: <div class="navbar-header"> <button type="button " class="navbar-to ...
I have a project where I need to style each letter in its own box, arranged next to each other or in multiple rows with spacing between them. Everything looks great until I resize the screen to a smaller size or check it on mobile - then the letters in the ...
<!DOCTYPE html> <html> <head> <title>Data</title> </head> <body> /* Enter your data here */ <form action="this.php" method="post"> <input type='text&a ...
I am currently working on a project that involves two files, A .js and a .php. The .php file is responsible for connecting to the MySQL database, while the .js file serves as the frontend of the system. I am in the process of setting it up so that it sends ...
I cannot access the this.array variable in my TypeScript-Angular 4 application. The error is being thrown at this.services.push because this.services is undefined. My code looks like this: export class ServersComponent implements OnInit { //Initializi ...
There are 3 buttons available: button 1, button 2, and button 3. Button 1 toggles the show/hide functionality of the left side, button 2 does the same for the right side, and button 3 affects both sides simultaneously. What is the best approach to achieve ...
^As mentioned in the title^. I am looking to adjust padding based on the width of a browser. My attempt so far has been: html, body{ height: 100%; } body{ display: table; margin: 0 auto; } #center{ display: table-cell; vertical-align: middle ...
In this code snippet, I am attempting to retrieve a JSON response from a PHP page and then iterate through it to display the name field of each JSON object. However, for some reason, nothing is being alerted out. <html> <head> <title>A ...
I am facing difficulty closing a jQuery dialog box using Selenium Webdriver. See my code below. I am currently using Selenium WebDriver version 2.44.0 and Firefox version 33. Any suggestions would be greatly appreciated. from selenium import webdriver fro ...
Currently, I am in the process of developing a straightforward PHP script to extract the actual link from a website that conceals the real link/key using the javascript:void(0) approach. Upon inspecting the source code, I noticed that the href link is empt ...
In my HTML document, there are around 80 small boxes arranged in a grid layout. Each box contains unique text but follows the same structure with three values: name, email, and mobile number. I need to switch the positions of the email and mobile number v ...
After coming across the javascript picture control on the Google search page, I became interested in replicating it myself. The feature zooms in on a picture when hovering over it, but I couldn't locate the HTML code they were using for it. Is there ...
Check out this HTML code: <head> <meta charset="UTF-8"> <title>Countdown</title> <style> /* CSS goes here */ </style> </head> <body> <ul> <li>one</li> ...
After jQuery deprecated the .toggle() method, I have been searching for a new and simple solution to implement a "Read more" button that slides down a paragraph while changing text to "Read less". Below is the code I have put together: var moreText = "Re ...