CSS Media Query Assistance - optimizing text display for mobile responsiveness

I am currently facing an issue with my CSS code where the content is displaying as one long sentence on mobile devices, requiring users to scroll to read it. I am trying to modify it so that it displays as two lines on mobile.

<!-- promo banner -->
.site-tools-bar {
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.17);
    height: 42px;
    min-width: 1015px;
}

.site-tools-bar .site-tools-wrapper {
    width: 1015px;
    margin: 0px auto;
    padding: 12px 0px;
    text-align: center;
    position: relative;
}

.site-tools-bar a.header-promo {
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    font-size: 15px;
    float: center;
}

.site-tools-bar a.header-promo .promo-code {
    color: #ff0000;
}
htmlcssresponsive-designhidden

Answer №1

If you're looking for a simple starting point, here's a basic solution with just two screen sizes. The concept is to define different sizes and widths for elements based on the screen size using percentages.

    .site-tools-bar {
        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.17);
        height: 42px;
        margin: 0px auto;
        text-align: center;
        position: relative;
    }
    @media screen and (min-width: 321px) {
      .site-tools-bar {
      width:1015px;
      }
    }
    @media screen and (max-width: 320px) {
      .site-tools-bar {
      width:320px;
      }
    }
    .site-tools-wrapper {
        width: calc(100% - 24px);
        margin: 0px auto;
        padding: 12px 0px;
        text-align: center;
        position: relative;
    }

    .site-tools-bar a.header-promo {
        font-family: "Montserrat",sans-serif;
        text-transform: uppercase;
        font-size: 15px;
        float: center;
    }

    .site-tools-bar a.header-promo .promo-code {
        color: #ff0000;
    }

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

Eliminate the loading spinner from the tab on Google Chrome

Recently, I've been working on a project to create a website and have been searching for some innovative ideas. One interesting discovery I made was . What caught my eye was the unique feature where clicking on any tab did not result in the typical sp ...

jqueryhtmlcssgoogle-chromespinner

Despite being a valid <link rel="shortcut icon">, a validation error occurs

I'm encountering an error with the w3.org validator related to this line of code: <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> The error message provided is as follows: Line 1, Column 727: Invalid value shortcut icon f ...

htmlfaviconw3c-validation

Ensure that all items are centered while positioning one in the corner

Lately, I've been diving into the world of flexbox and trying out new things. However, there are still some concepts that elude me. My current project involves creating a straightforward layout with three flex items (children). The container is confi ...

htmlcssflexbox

Place an image in the middle of a div

Here are a few images for you to consider: <div class="builder-item-content row"> <div class="twelve columns b0" style="text-align:center;"> <ul class="upcoming-events"> <li> <a href="http://www.padi.com/scub ...

htmlcssimage

Challenges with looping in Jquery animations

I've been working on an animation function that I want to run in a loop. So far, I've managed to get it to work for one iteration, but I'm struggling to figure out how to repeat the loop a specific number of times. Below is the code for my a ...

jquerycssanimationjquery-animate

Strip the quotes from MVEL's @foreach when iterating over a string array

I am currently using the @foreach Orb notation within MVEL to loop through a string array. someArrayPartOfAJSONObject = ["Item 1", "Item 2"] <ul> @foreach{item: someArrayPartOfAJSONObject} <li>@{item}</li> </ul> However, when ...

htmlmvel

ng-init assign value to a new object

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl2" ng-init="person = new Person('Al ...

javascripthtmlangularjs

Customize your Bootstrap navbar dropdown to showcase menu items in a horizontal layout

I have been developing a new project that requires a navbar to be positioned at the center of the page, at the top. The current HTML code I am using is as follows... <div class="navbar navbar-inverse navbar-fixed-top center"> <div class="con ...

javascriptjqueryhtmlcsstwitter-bootstrap

Customize the color of arrows within an ng-bootstrap carousel

I am currently working on a carousel using ng-bootstrap, and I need to change the color or image of the arrows from white to black because my background images are white and not visible. The issue is that I am having trouble accessing span, and I am unsure ...

htmlsassbootstrap-4

Ensure that the top of a div stays in place as the user scrolls, and spans the entire width of the div

My goal is to create a sticky or fixed position header inside a div with a list, but I'm facing an issue where it only sticks to the width of the text. If I expand the width to 100%, it takes up the size of the entire page: import styled from 'st ...

htmlcssreactjsstyled-components

"Verifying the dimensions of the input sizes with the i

It's possible that this question has been asked before on this platform. However, I haven't come across a satisfactory answer yet. How can I adjust the size of inputs in the iCheck library? The current size is too large for my website. Css: .ic ...

cssinputsizeicheck

Creating a navigation bar that stays fixed at the top of

Hey there, currently I am utilizing a combination of jquery and css to affix my navigation menu at the top when scrolled. However, the problem is that my navigation menu is positioned beneath a div with a height set in viewport units (vh). The jquery scr ...

javascripthtmlcss

Is there a way to eliminate the .html extension from the end of URLs for web pages?

Can someone provide guidance on how to eliminate the .html extensions from file names? Specifically, I noticed this feature on the site tekmillion.com. Your assistance is greatly appreciated. Thank you! ...

html

Injecting a component in Angular 2 using an HTML selector

When I tried to access a component created using a selector within some HTML, I misunderstood the hierarchical provider creation process. I thought providers would look for an existing instance and provide that when injected into another component. In my ...

javascripthtmlangulartypescript

How to retrieve a DOM element using Aurelia framework

When it comes to accessing a DOM element in Aurelia, what are the best practices to follow for different use cases? Currently, I have two scenarios in my Aurelia project: Firstly, within the template, there is a form that I need to access from the view-mo ...

javascripthtmldomaurelia

Mobile site's call button functionality is malfunctioning

For the telephone number on my mobile site, I employed the <a href="tel:+1800229933">Call us free!</a> code. However, it seems to be malfunctioning on several devices. Any insight on this issue would be greatly appreciated. Thank you. ...

javascriptphphtml

problem with placing text into input field

When using my search program, I am encountering an issue where there is some added space before the text once it is set into the input box after clicking on a search result. To see the problem in action, you can visit the following link: http://jsfiddle. ...

jqueryhtml

Having Difficulty Applying a Background Color to a Class in Bulk

I am working on a unique HTML canvas for pixel art, which is created using a table made up of various divs all sharing the "pixel" class. I want to add a clear button that can reset the entire canvas, but changing the background color of each individual di ...

javascriptcssclassbackground-color

What is the reason for the malfunction of input :: - webkit-slider-thumb and input :: - moz-slider-thumb?

Designing a compact slider for enhancing user experience not limited to webkit browsers requires utilizing a scss template such as input { width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 1vm ...

css

Creating background color animations with Jquery hover

<div class="post_each"> <h1 class="post_title">Single Room Apartments</h1> <img class="thumb" src="1.jpg"/> <img class="thumb" src="1.jpg"/> <img class="thumb" src="1.jpg"/> <img class="thumb last" ...

javascriptjqueryhtmlcss