Issue with Bootstrap column functionality on iOS devices detected

I created a card using bootstrap that displays perfectly on all devices except for iOS devices. The layout completely changes on iOS devices as shown in the screenshot attached.

Here is the link to view my card on the test server:

Here are the screenshots for reference:

https://i.sstatic.net/zqnPG.jpg
https://i.sstatic.net/PIu8L.jpg

You can also view the Fiddle for the code here: https://jsfiddle.net/Lhjm8ztn/

<section class="card__list row">
    <div class="card__box col-md-12 col-sm-12">

      <div class="card">

        <div class="card__content">
            <div></div>
            <div class="ribbon"><span>Sponsored</span></div>
          <div class="row card__bottom2">
                <div class="col-6 col-sm-4 col-md-8 contest">
                        <img src="index.png" width="25px" height="25px"> <span class="card__title">MyTeam11</span>
                        <div class="date2">
                          <span class="time"> (2 Minutes Ago) </span>
                        </div>
                      </div>    

                <div class="col-3 col-sm-4 col-md-2 center3 card__price">
                        <span class="card__title">66%</span>
                  <div class="date">
                    Overlay
                  </div>
                </div>

                <div class="col-3 col-sm-4 col-md-2 center3 card__price">
                        <span class="card__title">25%</span>
                        <div class="date">
                          Margin
                        </div>
                      </div>
          </div>

        <div class="row card__bottom">
            <div class="col-6 col-sm-4 col-md-4 col-lg-2 left options">
              <span class="date weight">
                1.6 Million Monster 
                </span>
                <div class="date2">
                  43.6 % Overlay
                </div>


            </div>
            <div class="col-6 col-sm-4 col-md-4 col-lg-2 center card__price">
                    <span class="date weight"> ₹ 1600000</span>
              <div class="date2">
                Prizepool
              </div>
            </div>

            <div class="col-6 col-sm-4 col-md-4 col-lg-2 right left2 card__price">
                    <span class="date weight"> 55555</span>
             <div class="date2">
              Max Entries
            </div>
             </div>

             <div class="col-6 col-sm-4 col-md-4 col-lg-2 left center2 card__price">
                    <span class="date weight"> ₹ 35</span>
              <div class="date2">
               Entry Fee
             </div>
              </div>

             <div class="col-6 col-sm-4 col-md-4 col-lg-2 center left2 card__price">
              <progress id="pb0" value="620" max="1760"></progress>
              <div class="date2">
                620/1760 Joined
              </div>
             </div>


             <div class="col-6 col-sm-4 col-md-4 col-lg-2 center2 right card__price">

              <div class="date2">
                <button type="button" class="btn btncs btn-primary">Join Now</button>
              </div>
             </div>

       </div>

      </div>
    </div>

    </div>

    </section>

I attempted to adjust the display property, but it did not resolve the issue with the layout on iOS devices.

htmlcsstwitter-bootstrapbootstrap-4semantic-ui

Answer №1

To ensure compatibility with all sizes in iOS, consider adding the following code snippet to the end of your CSS file:

@media(min-width:320px) and (max-width:1024px){
.left2 {
    text-align: left !important;
}

.card__price {
    text-align: right !important;
}

.left2 {
    text-align: left !important;
}
}

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

Troubleshooting the malfunctioning AngularJS ui-view component

My ui-view isn't functioning properly, but no errors are being displayed. Can anyone help me figure out what I'm missing to make this work? This is the main template, index.html. <!DOCTYPE html> <html> <head> <meta charset= ...

javascripthtmlangularjsangular-ui-routerangular-routing

How to set up a Carousel as the background within a div using Bootstrap 5

I'm attempting to create a visually appealing layout by showcasing a Carousel component behind some text. The idea is to have scrolling and fading images with a prominent header overlaid on top of them. I want the carousel images to be contained withi ...

htmlcssbootstrap-5

showcasing recommended options in the search bar through the use of javaScript

Hey there, I've been working on creating result suggestions for my search bar. The generation process is all set, but I'm facing an issue with displaying the elements on the HTML page. During testing, I keep seeing ${resultItem.name}, and when I ...

javascripthtmlcss

Different syntax issues in Firefox and Internet Explorer are causing errors

While this code successfully runs on Firefox, it encounters errors when used on IE. document.getElementById('zip_container').style.borderLeft = '1px solid #D9D9D9;'; In this code snippet, zip_container refers to a div element. If any ...

javascriptcss

Troubleshooting an HTML Design Flaw: How to create a 3x3 table with

I have been attempting to design a HTML page with a 3x3 layout. Despite trying various methods, including divs and tables, I am having difficulty achieving equal spacing around the centered image and the other table rows. Below is an example of the layout ...

htmlcsshtml-table

execute a different function once the animation has finished running with the .bind

When attempting to detect the completion of a CSS animation in order to remove a class, I encountered an issue where using .bind causes the animation end event to trigger even for the other function. You can view the complete code here. How can I ensure ...

jquerycss

I utilized the `<script src="sample.pdf"></script>` tag in my HTML code and surprisingly, the JavaScript within the PDF document was still able to execute

Recently, I encountered a situation where I included a PDF file with JavaScript code in the src attribute of a script tag in my code. Surprisingly, the JavaScript code executed without any issues. This made me wonder if I can use any type of file extension ...

javascripthtml

Tips for creating an input box that only accepts floating point numbers:

I have a custom component - a text box that I am using in two different places. In one location, it accepts integers and in another, floats. For the integer validation (where dataType=2), I have successfully implemented it. However, for the float validat ...

javascripthtmlangulartypescript

Combining four numbers to calculate a total with the click of a button

I am currently attempting to calculate the sum of 4 entries in 4 separate text fields, and everything appears to be working correctly except that when I click the button, the sum is not being set. For example, if I enter the number 1 in each text input, th ...

javascripthtml

Should I convert to an image or utilize the canvas?

I'm debating whether it's more efficient to convert a canvas drawing into an image before inserting it into the DOM, or if it's better to simply add the canvas itself. My method involves utilizing canvas to generate the image. ...

javascripthtmlcanvas

Is it possible to adjust an inline CSS style upon clicking a link?

I currently have a form that is hidden using inline styling style="display: none;" Is there a way to dynamically update this style to style="display: inline;" once a specific link on the page is clicked? ...

htmlcssstyles

What are the benefits of incorporating various custom fonts through @font-face?

I feel like I must be overlooking something very simple. I have been using a single custom font with a normal font face: @font-face { font-family: CustomFont; src: url('CustomFont.ttf'); } Everything works perfectly when I use this font ...

cssfontsfont-face

Animate the jQuery: Move the image up and down inside a smaller height container with hidden overflow

Check out the fiddle to see the animation in action! The image is programmed to ascend until its bottom aligns with the bottom of the div, and then descend until its top aligns with the top edge of its parent div, revealing the image in the process. ...

javascriptjqueryhtmlcss

Leverage JQuery Mobile for smooth sliding and effortless deletion of list elements

Currently, I am testing a JQuery Mobile webpage that features a simple list setup: Upon clicking the list items, they get highlighted and their ids are saved in a local array. Is there an easy (or not so easy) way to transition the selected elements slidi ...

javascriptjqueryhtmljquery-mobile

Exploring the wonders of multer in a nodejs application

I am having trouble uploading a file from my webpage to a Node server. Although I can see that the form data is reaching the server's router, No file seems to be saved in the upload folder. What could I be doing wrong? //router section const expr ...

htmlnode.jsuploadmulter

Validating CodeIgniter using advanced JavaScript techniques

When trying to insert data using a JavaScript and Bootstrap validation script, I encountered an issue. After entering a value in the text box, a warning pops up stating that the input value already exists. What should I modify in my script to address this ...

javascriptphpjquerytwitter-bootstrapcodeigniter

Can you provide a guide on how to retrieve an HTML file using JSON?

There is a problem with fetching files in different formats. Specifically, I want to retrieve an HTML file that needs to be embedded in an iFrame. Currently, my AJAX request only retrieves SWF files. Is there a way to call and fetch the HTML file instead ...

javascriptjqueryhtmlajaxjson

After the main page is loaded, the div will be dynamically populated with HTML content. How can we confirm that it has finished

I recently took over a project where a page loads and then code attached to that page populates a div with dynamically generated html – essentially filling an existing div with a string of html elements. Within this string are links to images, among oth ...

javascriptjqueryhtmlloading

Difficulties encountered when attempting to use a background image for shadow effects within a CSS design

I have been learning from a tutorial on how to create a fixed tabless CSS layout, starting from Photoshop and ending with HTML+CSS code. Here is the final example suggested by the tutorial (how it should look like in the end): And this is my own version ...

htmlcsslayoutxhtml

Clicking on a React component will result in highlighting

What's the best way to display the selected item after a user clicks on it? <Box py={2}> <Grid container width="330px"> <Grid container direction="column" item xs align="left"> ...

cssreactjsmaterial-ui