CSS3 Flexbox creating excess space on the right side

My website currently has a 4 column layout with each div set to a width of 25%, which is resulting in empty space on the right side. How can I adjust this layout to fill the entire screen width?

https://i.sstatic.net/d0cJ6.png

I have created a flexbox slider with images but am facing an issue where there is empty space on the right due to using a 25% width for each slide. Can anyone suggest a solution to fix this problem?
<html>
 <head></head>
 <body>
  <div class="flexbox-slider my-flexbox-slider" style=""> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> ... 
  </div>
 </body>
</html>

javascripthtmlcssflexbox

Answer №1

When you exclude the "..." from your HTML, it eliminates that extra space.

body,html{margin:0;padding:0}.flexbox-slider{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:364px;visibility:hidden;margin:auto;padding-bottom:40px}.flexbox-slider .flexbox-slide img{position:absolute}.flexbox-slider .flexbox-slide{-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-delay    
...
  	<img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div>
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div>
  </div>
 </body>
</html>

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

Experiencing an Issue with NGINX Loading Vue 3 Vite SPA as a Blank White Page

I currently have the following NGINX configuration set up: events { worker_connections 1024; } http { server { listen 80; server_name localhost; location / { root C:/test; index index.html; ...

javascripttypescriptvue.jsnginxvite

Problem with Ionic 2 local storage: struggling to store retrieved value in a variable

Struggling to assign the retrieved value from a .get function to a variable declared outside of it. var dt; //fetching data this.local.get('didTutorial').then((value) => { alert(value); dt = value; }) console.log("Local Storage value: " ...

javascriptionic-frameworkangularionic2

Unconventional arrangement of gaps for radio buttons

Hey there, I've been searching for solutions on various platforms but haven't found any luck so far. These are the questions I've looked into: Radio buttons and label to display in same line Documentation on <FIELDSE ...

htmlcss

Eliminate lower values in select 1 if the value selected in select 2 is higher

I am struggling with a particular piece of code and could really use some assistance. Within my project, I have two select boxes. The first box allows users to select the "from" year, while the second box is for selecting the "to" year. What I'm tryi ...

javascriptphpjquery

Add a text to the values in a column of a table when the IDs are the same

I am working on a project that involves updating a table based on a data change. The table has a column for ID and when the ID matches a specific variable, I need to append the word 'Updated!' next to it in the table cell. However, the code I hav ...

javascriptjquery

Can you identify the issue with the phase control in my sine wave program?

I have recently developed an interactive sine wave drawing web application. Below is the code snippet for reference: const canvas = document.getElementById("canvas"), amplitude_slider = document.getElementById("amplitude_control"), wavelength_slider ...

javascripthtmlhtml5-canvassign

Encountered an issue during the creation of a Nuxt.js project using the command line tool, where a SyntaxError was triggered

I encountered an issue while attempting to set up a nuxt.js starter project using the nuxt cli. Here are the steps I followed: Installed vue cli globally with the command: npm install -g vue-cli Created the project using: vue init nuxt-community/star ...

javascriptnode.jsexpressvue.jsnuxt.js

Error message: The function for the AJAX call is not defined

I'm currently working with jQuery's ajax function and encountering an error: 'getQty is not defined' Can you spot my mistake here? jQuery Code: function getQty() { var dataString = "itemId=" +$(".itemId").val(); $.ajax({ t ...

javascriptjqueryajax

Documentation guide: best practices for indicating optional return values

I am tasked with properly documenting a function using JSDoc. The function triggers something if it returns true, otherwise it does not. However, the return value must always be of boolean type. Here is my proposed JSDoc documentation: * @return {boolean ...

javascriptdocumentationjsdoc

Having difficulty sending emails with Nodemailer

This is a simple example showcasing the usage of Nodemailer library. var http = require('http'); var port = process.env.PORT || 8080; var async = require('async'); var nodemailer = require('nodemailer'); // Creating a transp ...

javascriptnode.jsnodemailer

Selection of Dropdown results in PDF not loading

I am facing an issue with my function that selects a PDF from a dropdown list. Instead of loading and displaying the PDF, it only shows a blank modal. Any suggestions on how to fix this? <li> <a href="">Case Studies</a> <ul clas ...

javascriptbootstrap-modaldropdown

Leverage the URL parameter with variables in HTML using AngularJS

I'm facing the same issue as yesterday: trying to extract and utilize parameters from the URL within my HTML page using AngularJS. What am I doing wrong? The parameter I need to work with is: https://url.com/index.html?user I aim to retrieve the "u ...

javascripthtmlangularjs

Binding multiple forms in backend ASP.NET MVC using Managed Extensibility Framework (MEF)

We are facing a challenge where we need to send multiple forms in one Ajax (jQuery) Call to an ASP application. The jQuery code we are using is as follows: var formContainer = { Form1 : form1.serialize(), Form2 : form2.serialize() } ...

javascriptjqueryajaxasp.net-mvcmodel-binding

Expanding a container component with React TypeScript

I'm in the process of developing a foundational class, encapsulating it within a container, and extending it in my various components. Here's a basic example: let state = new State(); class Base extends React.Component<{}, {}> { } const ...

javascriptreactjstypescript

Guide to activating the timer specifically on select pages with jQuery Mobile

I've developed a quiz application using jQuery Mobile and I am working on implementing a timer feature. The timer should run from 0 seconds up to 1 hour but only when the user is viewing specific pages, specifically the question pages. The timer is di ...

javascriptjqueryhtmljquery-mobiletimer

What is the most efficient way to dynamically add a class to multiple elements in AngularJS using ng-click?

On my HTML page, I have 2 lists that I want to modify so that when an option is clicked, it adds a class altering the background-color of the li element to red. If the same option is clicked again, it removes the class and reverts back to white: This is t ...

javascriptangularjs

Create an Ajax request function to execute a PHP function, for those just starting out

I came across a JS-Jquery file that almost meets my needs. It currently calls a PHP function when a checkbox is clicked, and now I want to add another checkbox that will call a different PHP function. My initial attempt was to copy the existing function a ...

phpjavascriptjqueryajaxwordpress

The toolbar button in the Froala WYSIWYG editor is mysteriously missing from view

Embarking on a project with Froala editor and Angular 1, I meticulously followed the documentation to show the insertImage button and insertTable, but they are not appearing. Here is my code: var tb = ["bold", "italic", "insertTable", "insertImage"]; $sc ...

javascriptangularjsfroala

Select a specific division element using a pseudo element

My goal is to specifically target the third div in my HTML code with a class called .counter-wrap. When viewed on a mobile device, this particular div has a margin-bottom of 40px. I am looking to eliminate the margin-bottom for only the third stacked div n ...

htmlcsscss-selectorsflexbox

Bizarre JavaScript Comparisons

I encountered an issue with the comparison process. The expected result should be 11 since the cost of the product at index 11 is lower than the cost of the product at index 18. However, the computed result turns out to be 18. var scores = [60, 50, 6 ...

javascript