Optimizing Container size for devices with smaller screens

After creating a container with a panel and a panel body, everything looked fine when viewed on desktop. However, upon checking it on my phone, I noticed a large space on the right with nothing there.

If you'd like to see an image of the issue, click here.

For a closer look at the code, visit this link.

I'm seeking advice on how to address this issue. I experimented with setting container-fluid but wasn't satisfied with how it displayed on desktop. I'm not certain if container-fluid would resolve the problem either. Any tips or suggestions on fixing this issue are greatly appreciated. Additionally, I'm open to making changes to the layout of my article page. As this is my first time creating an article page, any guidance would be valuable.

<div class="container">
    <div class="row">

        <div class="col-lg-9">

            <div class="panel panel-default">

                <div class="panel-body">

                    <div class="page-header">
                        <h3>
                            NFL Tutorial <small>Posted on January 25th</small>
                        </h3>
                        <div class="fb-like" data-href="https://google.com" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
                    </div>

                    <div>
                        <ul>
                            <li>
                                <p>
                                <h4>
                                    <b>1. Football is an 11 vs 11 sp

Answer №1

Why not consider this alternative:

<div class="col-xl-6 col-lg-9">

It's just a suggestion, as I haven't been able to test it myself...

Answer №2

@media only screen and (max-width: 768px) { .wrapper { width: 100%; margin: 0 } }

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

Struggling to make the text color change when hovering

On my website, I added a tab called newarrival at the top of the page. When you hover over this tab, I want the text to turn blue to indicate that it's a link. However, despite my efforts, it doesn't seem to be working as expected. You can see th ...

Just starting out with Boostrap; looking for ways to tidy up this code and achieve the intended effect

UPDATE: Check out the revised JS Fiddle link at the end of this post; I managed to achieve the desired result, but I believe there's room for improvement in the code! After experimenting with HTML/CSS for some time, I'm now working on my first l ...

scrape particular data from a table using scrapy

Currently, I am utilizing scrapy to extract content from a website specifically located within a particular <td> tag. The guide provided demonstrates downloading all the information, however, I only require the data from one individual <td>. As ...

Is there a way to showcase an HTML body in the Gmail app on iOS?

I am facing a challenge while trying to incorporate HTML formatting in the body of an email shared through Gmail using UIActivityViewController on iOS. Despite my efforts, the Gmail application fails to render the HTML content properly and only displays pl ...

Interactive Image Effects with Hover using HTML and JavaScript

I have observed that the transform works fine, but there is a slight issue when initially hovering or touching the image. After the first touch or hover, everything works great. Any assistance on fixing this minor issue would be greatly appreciated. Thank ...

How can I add content using HTML or JavaScript?

How can I append a .txt file using HTML or Java without ActiveX prompts getting in the way? It's becoming quite annoying! Is there a simple way to script this task without having to deal with ActiveX? The current script snippet looks something like ...

"Utilizing a Font Awesome icon within the dropdown list of a combobox in Ext JS

I have attempted multiple methods to add an icon in the displayfield when a combo box item is selected without success. Here is the fiddle link for anyone who would like to help me with this issue. Your assistance is greatly appreciated. View the example ...

Icon in navigation dropping down and moving to next line

Trying to use Bootstrap 4 and dropdown-toggle:after to display siblings as a wordpress menu. The issue is that I can't seem to keep the carrot on the same line as the text on smaller screens. https://i.sstatic.net/rJBM5.png Check out the code snippe ...

A guide to mastering Nested Table creation in Angular

I'm in the process of creating a dynamic table using an array of data let data = [{ "criterialimitId": "3", "criteriaName": "Test", "criteriaId": "1", "criteria": "Max Wager", "type": "DAILY", "oprLimit": "2.5", "status": "1", "acti ...

What is causing the "draggable='true'" attribute to fail on a React-rendered component?

This situation is really frustrating me, and I am hoping that someone can offer some assistance. I'm working with a React.Component that looks like this: var Vehicle = React.createClass({ ondragend: function(e) { e.preventDefault(); ...

Increase the space below the footer on the Facebook page to allow for an

I recently created a webpage at and noticed that it is adding extra height below the footer on my Facebook page: "" I am seeking assistance on how to remove this additional 21px height below all content in the footer. I have tried various templates but n ...

Issues with clicking in JS eventListener

I'm in need of some assistance with a small header issue in my project. I've included all the necessary header files so that you can run it in a snippet and see what's going on. The problem lies within my JS file. When running the file, you ...

What is the procedure for adding a background to a primeNg Tree component?

Working with Angular CLI 6 and primeNg version 6.0.1 I have been attempting to customize the background of the tree component without success. When I try using style="background:red" in the HTML file, the tree display becomes distorted with a height of on ...

Dynamic Material UI TextField underline width using JSX in React

I recently encountered an issue while trying to add padding to my TextField component. I applied the padding to the root 'style' property, but it caused the underline to overflow beyond the designated area to the right by the same amount as the p ...

What is the best way to decrease the width of one of the four columns?

I trust all is well with you. I'm having trouble adjusting the width of one of my table data cells. In the image attached below, you'll notice that my + icon is the same size as the other columns. I'd like to make it much narrower and posit ...

Is it feasible to distribute logic across Components?

My components all serve the same purpose: They display a form (with varying HTML) Capture the form data Validate and send the form using a REST API I am trying to find a way to share common elements among these components. For instance, each form includ ...

What is a method to resize an SVG path to a specific pixel size without altering any of the SVG attributes?

Is it possible to adjust the size of a <path> to fit a specific px dimension by simply altering the attributes of the path itself? Within an SVG, I have a carrot symbol represented by a <path>. <svg height="600" width="400"> <p ...

Troubleshooting the lack of functionality with justify-items in CSS Grid

I'm facing an issue with my CSS Grid. I am attempting to set the justify-items property to start. Despite referencing the specification and watching a tutorial where it works, the property (and related ones) are not functioning as expected. In my tex ...

Choosing particular contenteditable divisions using jQuery

Consider the following HTML structure for a specific type of blog post editor: <div class="entry"> <div class="title" contenteditable="true"> <h2>Title goes here</h2> </div> <div class="content" contenteditable ...

Tips for creating a responsive container for mobile and smaller devices using Bootstrap 3

Apologies in advance for the lengthy post, but I welcome any suggestions and ideas. Thank you! I'm facing an issue with my layout breaking when the screen size is below 1200px (images and text drop down). I don't mind if they stack vertically on ...