"Utilizing Bootstrap to create a visually appealing image and text combination in the

I need to arrange the image, first span, and second span in a vertical stack for xs devices. The alignment should be centered for xs devices.

If you want to see my code: CLICK HERE

<div class="row">
    <div>
        <div class="col-md-9 col-md-offset-3 col-sm-10 col-sm-offset-2" style="padding-right:0px">
            <img src="Images/signin_logo.jpg" width="150" height="110" />
            <p><span style="color:#989898; font-size:36px">Template Fire Sign In</span>
                <br /><span style="color:#A8A8A8; font-size:18px">Please sign in with your credentials now to get access.</span>

            </p>
        </div>
    </div>
</div>

The layout I am aiming for is something like this: CLICK HERE


      Image
     Span One
  Span Second...
     ........
htmlcsstwitter-bootstrap-3

Answer №1

To achieve the desired outcome, include this CSS in your code. Keep in mind that the elements will be centered when the display width is 767px or less, but you can adjust this by modifying the max-width value.

@media only screen and (max-width: 767px){
    .row img,
    .row p{
        display:block;
        margin: 10px auto;
        text-align: center;
    }
}

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 it possible to enable CSS margins to collapse across a fieldset boundary in any way?

One interesting CSS behavior is that adjacent vertical margins typically collapse into one another. In other words, the space between elements will be equal to the larger margin instead of the sum of both margins. Interestingly, fieldset elements do not f ...

cssmarginfieldset

determining the user's position within the <s:select> element

I have a dropdown select tag in my code with a list of countries. I want the user's country to be auto-selected when they access the page. This is the JSP code snippet: <s:select name="dropdown" list="countries" listKey="value" listV ...

javascripthtmlgoogle-mapsgoogle-maps-api-3struts2

Unable to update Favicon in XAMPP

I've tried using XAMPP and even included the code for index.html, but the favicon won't budge. <!DOCTYPE html> <html> <head> <link rel="icon" href="favicon.ico" type="image/x-icon"> </head> <body> </body> ...

html

Switch between showing the Font Awesome TitleText and its associated Class with a single click

Can the value of the title attribute for <i> be toggled? For example, if the title is set to <i title="Favorite This Post" class="fa fa-star-o" aria-hidden="true"> within <div class="postoption"> I would like to toggle both the title te ...

javascriptjquerycssfont-awesome

Show and hide the div by clicking a button

Looking at the image below, my goal is to display the div under the reply button. (The div consists of a text box and send button) https://i.stack.imgur.com/jnaV4.png The code I have currently functions correctly. However, when clicking any reply button ...

phphtmlapibootstrap-4

What is the reason for the jQuery plugin not being applied after replacing the page content with an Ajax response?

At the moment, I am utilizing jQuery ajax to dynamically add content to my website. Additionally, I have incorporated the jquery.selectbox-0.6.1.js plugin to enhance the style of select boxes on the page. The plugin successfully styles the select boxes up ...

javascriptjqueryhtmlcssajax

Leveraging package.json information within HTML using ReactJS

Currently, I am facing a situation where I need to incorporate the name attribute from the package.json file into my HTML code in order to use it as the title of the document. While I am aware that this can be achieved through the use of the react-helmet ...

htmlreactjs

Create unique identifiers for the TD elements of Viz.js that will be displayed within the SVG elements

Below is the DOT code snippet in Viz.js that I am working with: digraph G { node [fontname = "font-awesome"]; 17 [id=17, shape="hexagon", label=<<TABLE BORDER="0"> <TR><TD>undefined</TD></TR> <TR><TD>[47-56]< ...

javascriptjqueryhtmlsvggraphviz

Determining when a message has been ignored using php

One of the features I am working on for my app is adding announcements, which are essentially personalized messages to users. Once a user receives a message and dismisses it, I want to ensure that specific message does not appear again. Here is the PHP co ...

javascriptphphtmljquery

Prevent Cross-Site Scripting attacks in Laravel by sanitizing user input, even when allowing HTML tags

What measures can be taken to protect against XSS attacks when a user is allowed to use HTML tags, such as in a textarea element? Avoiding the stripping or escaping of all tags complicates the situation and rules out the option of using {{ }}. It's a ...

javascriptphphtmllaravelxss

JQuery animations not functioning as expected

I've been attempting to create a functionality where list items can scroll up and down upon clicking a link. Unfortunately, I haven't been able to achieve the desired outcome. UPDATE: Included a JSFiddle jQuery Code: $(document).ready(function ...

javascriptjquerycss

What is the best way to combine PHP and HTML within a JavaScript script?

I'm facing a challenge with integrating dynamically added elements and a populated drop down on my form. Is there a way to combine the two seamlessly? Below is the code snippet I'm using for dynamically adding and removing elements: $(docu ...

javascriptphphtml

Display only the labels of percentages that exceed 5% on the pie chart using Chart JS

I'm currently diving into web development along with learning Chart.js and pie charts. In my project, the pie chart I've created displays smaller percentage values that are hardly visible, resulting in a poor user experience on our website. How c ...

javascripthtmlcsscharts

Conceal the vertical scrollbar while allowing horizontal scrolling to remain enabled

I'm attempting to create a layout with HTML/CSS where there is a div that can be scrolled vertically and horizontally, but I only want the horizontal scrollbar to be visible. The vertical scrolling should be done using the mouse wheel while the horizo ...

htmlcss

The absence of PHP GET variable being set

I am encountering an issue with my registration php class. It is designed to display a form and upon clicking the registration button, it triggers a function in a login javascript file. This JavaScript file utilizes ajax to send data to an index.php file. ...

javascriptphpjqueryajaxhtml

general declarations take precedence over media queries

One of my usual CSS rules looks something like this: #dayslist > div { height: 51px; } Then there's the media query CSS rule: @media (max-width: 979px){ #dayslist > div { height: 44px; } } However, whenever I resize my bro ...

cssresponsive-designmedia-queries

Begin one lesson, end all others

Looking for help with my expandable list menu that I created using jQuery. Here is the code snippet: $("#menu ul li ul").hide(); $("#menu ul li").click(function() { $(this).find("ul").slideToggle(); }); You can view the fully functional menu on jsFi ...

jqueryhtmlcss

Utilizing Python's urllib and urllib2 to automatically populate web forms

My goal is to automatically submit an HTML form using both urllib2 and urllib. import urllib import urllib2 url = 'site.com/registration.php' values = {'password' : 'password', 'username': 'username& ...

pythonhtmlurllib

What is the process for adjusting the font in my VS Code editor?

Currently diving into an Angular2 development video course, I stumbled upon something intriguing: https://i.stack.imgur.com/CIBcx.jpg Yes, aesthetically pleasing HTML attributes won't make me a coding genius. But let's be honest, who doesn&apos ...

htmleditorvisual-studio-codecode-formatting

Margin and padding have the ability to increase the size of an image

Is there a technique to position the logo.png so that it appears approximately one-third of the way across the page without affecting its size? I've attempted to use padding or margin adjustments, but it seems to distort the image despite having limit ...

htmlcssimage