alignment of text output and label that responds to various screensizes

Here is some html code with a label and an output next to it.

<div class="panel-body">

                    <div class="col-sm-6">
                        <label class="head6">Company Name : </label><span class="head9 halfR">'.$name.'</span>
                    </div>

                    <div class="col-sm-6">
                        <label class="head6">Website Address : </label><span class="head9 halfR">'.$url.'</span>    
                    </div>

                    <div class="col-sm-6">
                        <label class="head6">Slogan : </label><span class="head9 halfR">'.$tagline.'</span>

                    </div>

                    <div class="col-sm-6">
                        <label class="head6">Info : </label><span class="head9 halfR">'.$descrip.'</span>    
                    </div>

Additionally, there is css to adjust the space between the output and the label.

.halfR{
  width:60%;
  float:right;
  word-wrap:break-word;
}

In desktop view, everything looks good. However, when moving to mobile size, there is an issue as shown in this https://i.sstatic.net/k3alS.png.

Any suggestions on how to make it responsive would be highly appreciated.

htmlcsstwitter-bootstrapalignmentmultiple-columns

Answer №1

Here's one way to do it or you can also utilize bootstrap tables http://getbootstrap.com/css/#tables 

                <div class="col-sm-12">
                    <label class="head6">Company Name : </label><span class="head9 halfR">'.$name.'</span>
                </div>

                <div class="col-sm-12">
                    <label class="head6">Website URL : </label><span class="head9 halfR">'.$url.'</span>    
                </div>

                <div class="col-sm-12">
                    <label class="head6">Tagline : </label><span class="head9 halfR">'.$tagline.'</span>

                </div>

                <div class="col-sm-12">
                    <label class="head6">Description : </label><span class="head9 halfR">'.$descrip.'</span>    
                </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

Place content following a three.js display created within a <div id="mainWindow">

Recently, I created a small Three.js animation and embedded it in my HTML page like this: <div id="mainWindow" class="popup_block"> <!-- JavaScript for simulation --> <script src="../temp/webgl-debug.js"></script> <scri ...

javascripthtmlcssthree.js

I am seeking a way to conceal list elements according to a specified string input using JavaScript

Looking at the list items inside this div: <div class="container"> <h2>Vanishing Act Game</h2> <div> <li class="list-group-item go" id="item">Door#1</li> <li class="list-group-item go" id="it ...

javascriptcssdjangofrontend

Assigning background colors based on the data stored in a specific field of a MySQL database

I have successfully implemented a Ticketing System using PHP and MySQL database. The view tickets page displays each ticket from the database along with its priority level, which can be Low, Normal or High. Currently, the priority value pulled from the d ...

phpmysqlcss

Safari 5 experiences delays with JQuery and CSS3 animations

Encountering issues with jQuery animations specifically in Safari 5 on my Windows system. Struggling with a simple image fade slider that still has some flickering. The slider involves click events moving two pages at once, one active page right and the o ...

jquerycssanimationsafarilag

Change wiki text into HTML using Python for showcasing on a webpage

Despite trying various tools for 6 hours, I have been unable to find one that can properly interpret wikitext like the example below: '<center>Welcome to the world's foremost open content<br><big><big><big>'&ap ...

pythonhtmlmarkupwikipediawikitext

I am encountering a horizontal scroll bar despite setting the width to 100%

I am just starting out as a beginner in web development. I decided to create a webpage to practice my HTML and CSS skills. However, when I set the width of all elements to 100%, I noticed that I am getting a horizontal scroll bar. I have tried troubleshoot ...

javascripthtmlcss

One problem with placing Bootstrap columns inside another column

Currently, I am in the process of working on a website that requires a description section. To achieve this, I decided to use two Bootstrap columns – one with a size of 8 and another with a size of 4, totaling up to 12 grid units. Inside the column sized ...

htmlcsstwitter-bootstrappositioncss-position

using jquery to trap anchor in unordered list items

This section is dedicated to the menu on the website. The code for this menu can be found in the _Layout.cshtml() page. When the 'Neu Gesellschaft' page loads, I want to change the CSS of the anchor tag a. I attempted the following jQuery code: ...

jqueryhtmlcss

I am getting a 404 error message stating that node_modules cannot be found

I am currently working on a web application using gulp and angular. However, when I run 'gulp serve', the application is unable to locate the files in the node_modules folder. Below is an excerpt from my gulp file: // This gulp file was generat ...

htmlangularjshttp-status-code-404

creating a multi-page form using HTML and JavaScript

I need help creating a multi-page form with a unique tab display. The first page should not have a tab-pill, while the following pages should display tabs without including the first page tab. Users can navigate to the first page using only the previous b ...

javascripthtmljquerycsstwitter-bootstrap

Some characters are not compatible with the CSS writing-mode feature

There seems to be an issue with the CSS writing mode not applying correctly to the symbol '№'. Here is an example: <html> <head></head> <body> <p style="writing-mode: vertical-lr;"> Номер № ...

css

Troubleshooting a Cache Issue in Your Next.js Application

Whenever I attempt to run 'npm run build', an error crops up that seems to be linked to the css and fonts. Unfortunately, I am unsure of how to tackle this problem. It's perplexing as the app functions perfectly fine in development mode. Th ...

csswebpackcachingnext.jsfonts

Accessing a JSON array in PHP to retrieve a specific value

I am working with a JSON array that I received from an API. Specifically, I am trying to extract the "value" and "value_high" fields from the JSON related to the Mann Co Supply Crate Key. While I was able to create a script that retrieves the values store ...

phphtmljson

Update a div's content with a click

I'm looking for a way to update the data in my div whenever I click on a link that reveals the div. Despite finding many similar answers, none have worked for me. Here's what I have: I have multiple divs that become visible when clicking on lin ...

phpjqueryhtml

Troubleshooting Problem in Coursera's AngularJS Week 3 Exercise 4

Here's the issue I'm facing: After launching the index page with 'gulp watch', there's nothing visible on the screen. An error appears: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.12/$injector/modulerr?p ...

javascripthtmlangularjs

Adjusting the dimensions of a rectangle using jQuery: A step-by-step guide

I am encountering an issue while attempting to adjust the width and height of a rectangle using jQuery. The error message I receive is "Uncaught TypeError: Cannot read property 'scrollWidth' of null" Below you can find the code snippet in questi ...

javascriptjqueryhtmlcsssvg

Achieving equal height divs using Bootstrap

I have a row of 8 divs arranged horizontally, and I am looking to make them all the same height. Right now, their heights vary based on the content inside each one. Can someone offer some assistance? I've attempted multiple solutions without success s ...

htmlcsstwitter-bootstrap

Struggling with the display property d-none in Bootstrap

I'm currently attempting to show a segment of my code exclusively on medium-sized screens and larger, while displaying another portion of the code solely on small and extra-small screens through the utilization of Bootstrap. I made use of Bootstrap&ap ...

htmlbootstrap-4

Utilizing Jquery cycle to overlay a div on top of a scrolling image

Hey there! I'm currently using the jquery.cycle.all.js plugin for my website. I've encountered an issue where I want to position a menu div on top of an image slider. The menu is in the correct location, but unfortunately, it's hidden benea ...

jqueryhtmlcssjquery-cycle

Can CSS3 be utilized to craft this specific shape?

Can CSS3 be used to create the shape I need? I came across this website http://css-tricks.com/examples/ShapesOfCSS/, but I am unsure if any of the shapes on that page can be customized to match the specific shape I have in mind. Thank you! ...

htmlcssshapescss-shapes