Tips for creating consistent background text size

i need assistance creating a box for text that looks like this

https://i.stack.imgur.com/JOC0r.png

my CSS code for the box is as follows:

.bg-text-kol2 {
  background-color: #ffffff;
  background-size: 10px 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  -webkit-box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
  box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
}

as this slider uses swiper slider, here is the JavaScript code:

$(document).ready(function() {
  (function ($) {    
    //initialize swiper when document ready
    var swiper = new Swiper('.swiper-container', {
            slidesPerView: 2,
      spaceBetween: 20,
            centeredSlides: true,

  })(jQuery);
});

I am looking to set the size of the box to be consistent at 640px x 640px. How can I achieve this?

cssswiper.js

Answer №1

In my opinion, there are some enhancements you can make based on this demo where I attempted to recreate your images. One crucial aspect is defining the swiper height, as it aids the plugin in determining the swiper's size.

Check out the Codepen demo here: https://codepen.io/DieByMacro/pen/mYxJNo

var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'horizontal',
    slidesPerView: 2,
    loop: true,
    spaceBetween: 20,

    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })  
.swiper-container {
  width: 100%;
  height: 600px;
}

/**
Using flex to make sure the content expand full. This makes all items height equal
*/
.swiper-item {
  display: flex;
  flex-flow: column nowrap;
}
.swiper-item .item-image {
  flex: 0 0 auto;
  background: blue;
  height: 250px;
}
.swiper-item .item-content {
  flex: 1 1 0px;
  height: auto;
  background: white;
  padding: 20px;
  width: 85%;
  margin: -30px auto 0;
}

.wrapper {
  background: lightgreen;
  padding: 10px;
  width: 100%;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<div class="wrapper">
   <div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide swiper-item">
          <div class="item-image">
            Image
          </div>
          <div class="item-content">
            <div class="item-content__text">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia unde placeat fuga reprehenderit temporibus non velit molestiae quam ipsam assumenda, quo dignissimos neque, eligendi ad in, debitis voluptatem. Eos harum praesentium facere? Quo fuga ipsum ut tenetur consequuntur veniam minus, doloremque tempora sunt ipsam dolorum reprehenderit magni excepturi ipsa quaerat voluptatum ea repudiandae assumenda placeat, earum eum cumque quis voluptates corporis! Id quis suscipit molestias, dolor laboriosam laudantium corrupti, ipsa cumque culpa tempore enim veniam saepe accusantium, natus dolores! Blanditiis quo fugiat minus iusto modi, iure earum voluptas, consequuntur qui distinctio maiores esse quae error odio cupiditate nisi veniam ad.</p>
            </div>
          </div>
        </div>
        <div class="swiper-slide swiper-item">
          <div class="item-image">
            Image
          </div>
          <div class="item-content">
            <div class="item-content__text">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor sequi placeat reiciendis tenetur, illum est, ipsa esse iusto neque fugiat magnam earum nostrum deserunt, odit animi vel quas assumenda fugit obcaecati nulla! Reprehenderit eum, impedit quibusdam laborum harum unde tempore. A facilis itaque, in maiores nam reiciendis provident ducimus nesciunt, consequuntur dolorum numquam optio quis facere quisquam nemo distinctio saepe?</p>
            </div>
          </div>
        </div>
        <div class="swiper-slide swiper-item">
          <div class="item-image">
            Image
          </div>
          <div class="item-content">
            <div class="item-content__text">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, tempore!</p>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex possimus quaerat omnis officiis. Quaerat dignissimos libero porro nesciunt quidem beatae assumenda. Doloremque temporibus quia soluta cum officiis odio, maxime veritatis.</p>
            </div>
          </div>
        </div>
      </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>
</div>

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

Is there a way to compel @keyframes to continue playing until it reaches its conclusion even after a mouseout event

Whenever I hover over an element, a keyframe animation starts playing. However, when I move the cursor away, the animation stops abruptly. Is there a way to ensure that it plays until the end? I've tried using the animationend event, but it doesn&apos ...

javascriptcssanimationcss-animations

The navigation bar is obscuring the header on my website

I am facing an issue with creating a navigation bar that covers up the header text. I tried adjusting the margins to fix this problem but ended up moving the header along with the navigation bar. How can I ensure that the navigation bar remains fixed witho ...

htmlcss

Creating CSS styles for fluid width divs with equal height and background images

Looking to create a layout with two side-by-side divs of equal width - one containing an image and the other dynamic text that can vary in height from 400px to 550px based on input. The goal is for the image to align flush at the top and bottom with the te ...

htmlcss

adverse offset and backdrop

To achieve the desired layout, I am trying to adjust the negative margin for the .text div so that it aligns on top of the .image div. <div class="wrap"> <div class="image"><img src="imgage.jpg" /></div> <div class="text ...

htmlcss

Tips for adjusting image and div sizes dynamically according to the window size

In my quest, the end goal is to craft a simplistic gallery that closely resembles this particular example: EXAMPLE: This sample gallery is created using Flash technology, but I aim to develop mine utilizing HTML, CSS & Javascript to ensure compatibil ...

javascriptjqueryhtmlcss

tap into adhesive, translucent screen

I designed a webpage with an iframe at the bottom that I set to be transparent so that overlapped elements are visible. However, I encountered an issue where the links beneath the iframe were not clickable unless I disabled pointer-events for the iframe. ...

cssiframetransparency

Connections transition among associated HTML pages

I am working on my very first website using HTML and I'm encountering some challenges with maintaining consistency across pages. On the top of my page, I have a div containing some links. While they function correctly, I noticed that the spacing betw ...

htmlcsspositionspacing

Incorporating JavaScript and CSS files into a content page of a master page in ASP.NET: Steps to follow

I am facing an issue with adding javascript files and css to a content page of a master page in asp.net. I attempted to include a datetime picker on my ContentPage, but it only works on the masterpage. When I try to add the same code to my contentpage, i ...

javascriptcssasp.net

How about using a circle inset clip path technique?

Can a unique inset circle clip path be created to cut a hole through the center of a div instead of just showing the center? The entire div should be visible except for a hole cut out in the center to achieve a design similar to this: https://i.sstatic.n ...

csscss-shapesclip-path

Tips on navigating the scroller vertically as the user interacts with a selected div by scrolling up and down

On my webpage, I have various div elements displayed. Each div has the options to move it up or down using the buttons labeled "UP" and "Down". When a user selects a div, they can then use these buttons to adjust its position. I am looking for a way to au ...

javascriptjquerycss

Toggle checkbox feature in Bootstrap not functioning properly when placed within ng-view

When attempting to embed a bootstrap toggle checkbox within <ng-view></ng-view>, an issue arises where a regular HTML checkbox is displayed instead of the expected bootstrap toggle. Strangely, the same checkbox functions as a bootstrap toggle w ...

javascripthtmlcssangularjstwitter-bootstrap

Steps to add a label below a text input field

Within a form, I have two text boxes and I would like to add labels underneath each of them for better clarification. To illustrate my idea, here is a simple diagram: (input1)<--space-->(input2) <label1><--space--><label2> Is ther ...

htmlcss

Problems with select box rendering in Internet Explorer with Materialize CSS

When using materializecss select box in Internet Explorer 9 or higher, scrolling with the mouse button is not working. You must click on the scroll bar inside the select box for it to scroll. This issue does not occur in other browsers. I have attached a s ...

javascriptjqueryhtmlcssmaterial-design

Error encountered during Bootstrap 4 SCSS compilation: Invalid US-ASCII character identified as "xE2"

Encountering difficulties when compiling certain bootstrap 4 modules (switching from beta3). Despite the fact that the issue can be resolved by adding @charset: 'UTF-8'; to the _hover.scss mixin partial (which is flagged as deprecated within the ...

csssassbootstrap-4twitter-bootstrap-4

Module not found in Node.js environment (webpack)

I seem to be encountering an issue with loading any modules. Despite reinstalling my operating system, I continue to face the same error when attempting to use any module. I have tried reinstalling node, clearing the cache, and more. To view the code, pl ...

cssnode.jswebpackcss-loader

Is there a way to move my icon to the next row once it is added?

Can anyone suggest a style, bootstrap, or code solution for my issue? Currently, when I add an item, it is placed at the end of the row, but I want them to shift to the next row. Below are two images showing my current implementation: pic1 pic2 <div cl ...

htmlcssbootstrap-5

How can you insert text onto a page with restricted space?

As I work on my web page, I find myself restricted by a character limit of 10,000. This limitation is proving to be quite challenging for me. The tabs on the page I am editing are divided with div ID, and all my writing already takes up 80% of the charact ...

htmlcssembed

The width of a CSS border determines its height, not its width

When I try to use border-width: 100px; to set the horizontal width to 100px, it ends up setting the height to 100px instead. Any help would be greatly appreciated. .border-top-green { border-top: 1px solid #4C9962; border-width: 100px; padding-t ...

css

Issue with event.preventDefault() in Jquery not functioning as expected

My goal is to have the menu display and hide list items on click, with them being hidden by default. However, the issue I am facing is that the menu is generated in the admin section, so it automatically assigns a URL to each item. If I set the URL field o ...

javascriptjqueryhtmlcss

"Utilizing the flex box feature in IE 10 for efficient text trunc

.container { background: tomato; width: 100px; display: flex; } .text-left { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text-right { } <div class=container> <div class="text-left"> title title title ...

htmlcssflexboxinternet-explorer-10