Creating a mobile-friendly layout with 3 columns: Tips and tricks

I attempted to solve the issue independently but didn't have much success. My goal is to create a proper version for mobile users using bootstrap, however, it currently looks terrible on mobile devices. I suspect the problem lies with the div classes that I tried to modify, but unfortunately, it didn't yield the desired results.

Below is my code:

    <div class="container">
    <div class="row">
        <div class="col-xs-4 content">
            <ul class="featuresBody">
                <li><i class="icofont icofont-simple-right"></i>Unlimited Domains & Subdomains</li>
                <li><i class="icofont icofont-simple-right"></i>Ulimited Email Addresses</li>
                <li><i class="icofont icofont-simple-right"></i>Unlimited Databases (MySQL)</li>
                <li><i class="icofont icofont-simple-right"></i>Unlimited Bandwidth</li>
                <li><i class="icofont icofont-simple-right"></i>SSH, sFTP/FTP acess</li>
            </ul>
        </div>
        <div class="col-xs-4 content">
            <ul class="featuresBody">
                <li><i class="icofont icofont-simple-right"></i>PHP 5/7, Perl 5, Python, Zend, phpMyAdmin</li>
                <li><i class="icofont icofont-simple-right"></i>One Click CMS Install</li>
                <li><i class="icofont icofont-simple-right"></i>Cron Job Manager</li>
                <li><i class="icofont icofont-simple-right"></i>SSL Certificate</li>
                <li><i class="icofont icofont-simple-right"></i>POP3, IMAP, SMTP For E-Mail</li>
            </ul>
        </div>
        <div class="col-xs-4 content">
            <ul class="featuresBody">
                <li><i class="icofont icofont-simple-right"></i>Daily Backups</li>
                <li><i class="icofont icofont-simple-right"></i>Detailed Logs & Statistics</li>
                <li><i class="icofont icofont-simple-right"></i>Protection From Viruses</li>
                <li><i class="icofont icofont-simple-right"></i>Advanced DDoS Protection</li>
                <li><i class="icofont icofont-simple-right"></i>24/7 Support</li>
            </ul>
        </div>
    </div>
</div>

Thank you!
P.S Any tips for easily testing pages on mobile devices?

htmltwitter-bootstrapcssmobile

Answer №1

Utilizing Bootstrap, the col-xs class indicates that the column and its contents will adjust to fit on a mobile phone screen. With 3 columns displayed side by side on a larger monitor, each column is easily readable. If this aligns with your scenario (which I believe it does), consider switching from col-xs to col-md or even col-lg. This change will stack the columns vertically on smaller screens instead of compressing them horizontally. The left-most column will appear first, followed by the middle column upon scrolling down, and finally, the right column further below.

Answer №2

Here is a suggestion for you:

<div class="col-sm-12 col-md-4 content">

When it comes to vertical mobile devices, columns may not be the best choice. It is recommended to use rows instead.

Answer №3

Utilizing Bootstrap's smallest column size, known as extra small (xs), will always generate columns regardless of how narrow the viewport is. Consider using sm, md, lg instead, such as col-sm-4.

Refer to Bootstrap Grid Options.

For greater flexibility, you can assign multiple column classes to a single element. For instance, having 50% width columns on smaller mobile devices and 33.333% width columns on larger screens with 

<div class="col-xs-6 col-md-4">
.

Answer №4

I have a couple of suggestions to enhance your website's mobile responsiveness. Firstly, consider replacing col-xs-4 with col-sm-4 to prevent overcrowding on smaller screens. Additionally, for the little green arrow icon, I recommend setting its position to absolute. This will ensure that it remains in place even when word wrapping occurs.

.featuresBody > li i.icofont-simple-right {
  left: 10px;
  position: absolute;
  top: 10px;
}
.featuresBody > li {
  position: relative;
}

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

Code - Capture user's input

I have multiple input fields in my HTML document and I want to retrieve the text entered into one of them. Here's an example of one such input field: <TH> <FORM> <input name="designation" type="text" size="12" /> < ...

javascriptjqueryhtmlinput

Interactive hover effect in JavaScript displays a larger version of other thumbnails when hovering over a dynamically loaded thumbnail image, instead of its own full-size image

I recently began teaching myself PHP and Dreamweaver with the help of a video tutorial on building data-driven websites using Dreamweaver. My goal is to create a dynamic table with 6 columns and 20 rows. column1 | column2 | column3 | colu ...

phphtmlcssjavascriptmysql

Content in Slider Exceeding Container Bounds

After successfully creating a slider using jQuery with the help of some Stack Overflow users, everything was working perfectly. However, when attempting to change the layout of the slider, it somehow broke and now all slides are being pushed out of the con ...

jqueryhtmlcss

Using the 'active' class in Bootstrap-4 Navbar specifically for the parent element

As I style the navbar in Bootstrap 4, I encounter an issue with dropdown items. Specifically, when I apply the 'active' class to highlight a dropdown item, all sub-items (children) end up with the same highlighting effect. This results in an unap ...

csshtmlbootstrap-4

Guide to adding checkbox IDs and inserting them into a textarea

Hello, my name is Prasath and I am currently learning about AJAX. I am working on a project involving seat layouts and finding it challenging to retrieve both the seat fare and seat number simultaneously. Is there anyone who can assist me in resolving this ...

phphtmlajax

jQuery appears to be unresponsive or inactive

I'm trying to implement a jQuery script that will slide in a header after scrolling on the page, but for some reason, it's not working. When I reach the 3rd line, my code editor displays a !read only alert, suggesting there may be a syntax issue? ...

javascriptjquerycss

"activeStyle" attribute consistently being implemented on links within pagesindex.js

Just starting out with Gatsby/React and web development in general, so apologies if this is an easy fix. I'm facing an issue that I can't seem to solve. Currently, I'm working on my website's header and trying to create links to naviga ...

htmlreactjsgatsby

How can we calculate the `rotate` value for a CSS transform using a formula

Referencing this particular fiddle, I've developed a unique custom underline technique utilizing transform: skew(-30deg) rotate(-2deg);. Is there a way for me to substitute the static -2 with a dynamic formula based on the element's width? For ...

csssass

Glitch found in Safari involving innerText of elements

Hey everyone, I posted this question not too long ago but now I have some images to share regarding the issue with Safari. When checking the console in Safari, the following text is displayed: <div id="rot3posDisp" class="rotDisp">C</div> Ho ...

javascripthtmlsafari

Guide to aligning a div element along the right edge of the webpage

I'm struggling to align this div all the way to the right side of the screen. Below is the HTML: <html> <head> title></title> <link rel="stylesheet" type="text/css" href="../css/style.css"/> </head> <h1&g ...

htmlcss

Trigger a function upon the addition of a class to a div element | Execute AnimatedNumber()

Is there a way to trigger a function when a specific div receives a certain class? I have an animated div that only appears when scrolling, and once it's visible, it gains the class "in-view". I want to execute a function every time this div has the ...

jqueryhtml

Modifying the color of a div element solely through CSS styling

I am currently working with a set of buttons, available at this link. While browsing through this helpful post, I encountered an issue. Whenever I click on another element, the orange color of my button disappears. How can I maintain the orange color on t ...

htmlcssangular

Using Google Fonts in a Typescript React application with JSS: A step-by-step guide

How can I add Google fonts to my JSS for use in styling? const styles = ({palette, typography}: Theme) => createStyles({ time: { flexBasis: '10%', flexShrink: 0, fontSize: typography.pxToRem(20) }, guestname: ...

cssreactjstypescriptjss

Choose a selection from the options provided

This is a sample for demonstration purposes. I am trying to display an alert with the message "HI" when I click on Reports using the id main_menu_reports. My attempted solution is shown below. <ul class="nav" id='main_root_menu'> & ...

javascriptjqueryhtml

What is the best way to incorporate text animation into a website using Cascading Style Sheets (CSS)?

Is there a way to make my text flash twice per second? I attempted to create animated text, but it didn't work out! ...

htmlcssanimationtextcss-animations

The Angular Material Tree component is not rendering properly in an Angular tutorial demonstration

Upon completing the installation of @angular/material, @angular/cdk, and @angular/animations through npm install --save, I attempted to reconstruct the flat tree example provided by Angular. Unfortunately, even after addressing the error message stating Co ...

cssangulartreeangular-material

Navigating between two intervals in JavaScript requires following a few simple steps

I have created a digital clock with a button that switches the format between AM/PM system and 24-hour system. However, I am facing an issue where both formats are running simultaneously, causing the clocks to change every second. Despite trying various s ...

javascripthtml

Transferring Data Between Two Forms

Is there a way to transfer data between two HTML forms? For example, let's say we have two forms: Form 1: Contains a field for name and a submit button. Form 2: Contains fields for name, email, and a submit button. I would like to be able to fill o ...

phpjavascripthtmlforms

Converting CSS specific to a particular vendor: A step-by-step

Looking for a method to adapt a CSS file containing only -moz-css-property references to include compatibility with Chrome, Safari, and other browsers. Ideally seeking a user-friendly web application that can perform this task seamlessly. ...

css

Krajee Bootstrap File Input, receiving AJAX success notification

I am currently utilizing the Krajee Bootstrap File Input plugin to facilitate an upload through an AJAX call. For more information on the AJAX section of the Krajee plugin, please visit: Krajee plugin AJAX The JavaScript and PHP (CodeIgniter) code snippe ...

javascriptphpjqueryajaxtwitter-bootstrap