CSS technique for arranging text in order?

My website has a unique layout where certain text appears differently on desktop and mobile devices. Specifically, I have a simple text that looks like this on desktop:

Kolor : Niebieski
Rozmiar : S/M

However, I want it to appear like this on mobile:

Kolor : Niebieski Rozmiar : S/M

I attempted to use the following HTML code:

<a href="">Kolor : Niebieski<br> Rozmiar : S/M</a>

Additionally, I tried implementing the following CSS:

div br {
  display: none;
}

Despite my efforts, the desired result was not achieved. Can anyone provide suggestions on how to achieve the desired outcome without altering the HTML structure?

htmlcss

Answer №1

Make the line break hidden on smaller screens:

@media screen and (max-width: 600px) { /* Adjust the width for one-line display */
  br {
    display: none;
  }
}
<a href="">Color : Blue<br> Size : S/M</a>

In my opinion, it is better to keep these elements on separate lines as the current layout can be confusing and less visually appealing on mobile devices.

Answer №2

Give this a shot:

div span{
display: table-cell;
}

This might solve the issue for you.

Answer №3

Your HTML displays:

<a href="">Color: Blue<br> Size: S/M</a>

However, in your CSS you have:

div br { display: none; }

To hide the <br /> specifically on mobile, you should target it correctly:

a br { display: none; }

If you only want this to apply on mobile devices, wrap it inside a media query like this:

@media (max-width: 480px) {
  a br { display: none; }
}

Make sure to adjust the 480px to the actual breakpoint between mobile and desktop views.

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

Modify CSS when scrolling, based on the size of the screen

I've implemented this JQuery script to modify elements in my header as the user scrolls. Is there a way to limit these modifications based on the screen size? Here's the code snippet: $(window).scroll(function() { // Once the user has scro ...

jqueryhtmlcssscroll

What happens with the styling in this project when the CSS file is blank?

As a first-year CS student in university, I have been diving into the world of React.js. Currently, I am exploring a resume project and noticed that both app.js and index.js files are empty. I am curious to know how the styling is achieved in this project. ...

javascriptcssreactjsstyling

Incorporate a section of text to flow around a floated image within a paragraph

https://i.sstatic.net/s5aFq.png How can I achieve the text wrapping above an image similar to the layout in the sunflower picture? I have tried using relative positioning and adjusting the top property, but it doesn't allow the text to wrap around th ...

htmlcss

What is the process for identifying the ActiveX control being referenced on a webpage?

After developing a web application using ASP.NET Web Forms, I encountered a challenge with a client who has strict security policies. Whenever they try to access the web page, Internet Explorer displays a message stating: Your security settings do not all ...

asp.netjavascriptjqueryhtmlwebforms

What happens when Google Polymer platform is used without defining _polyfilled?

My attempt at creating a simple example using Google Polymer's platform.js is running into an error message that says: Uncaught TypeError: Cannot read property '_polyfilled' of undefined This is what I'm attempting to achieve: <cur ...

javascripthtmlpolyfillspolymerweb-component

The basic jQuery script seems to be malfunctioning

I am trying to attach an on click event to an li element using jQuery. I have written a simple jQuery code within the document ready function, but for some reason it is not functioning as expected. I have checked in both Chrome and Firefox, and there are n ...

javascriptjqueryhtml

Styling each list item individually, without interdependence

I am working on a ul that contains several list items comprised of h3s and lis with the "close" class. When I hover, I want to expand the letter spacing on the h3s, but the items with the close class also expand. I have tried using nth child selectors in ...

htmlcsshtml-lists

The Ajax load() function is malfunctioning

.load() will only function properly when the files are coming from a server, so I anticipate that it will work later once I have it hosted on a server Edit: This code is functional in Firefox but not in Chrome I've been attempting to apply ajax to l ...

htmlajaxload

Enclose an image with a <div> element while maintaining the <div> height at

Encountering a challenge where positioning an element on top of an image at specific coordinates (20% from the top and 30% from the left) is required. Initially, the solution involved wrapping the image in a div with a relative position and using absolute ...

javascriptjqueryhtmlcss

Tips for resolving the issue of encountering the error message "Cannot POST /" while transitioning between different websites

Forgive my lack of knowledge, I'm still in the learning process :) I am attempting to navigate from an HTML website to a React-built website by clicking a button. The first website is a simple HTML page, while the destination website is more complex a ...

javascripthtmlnode.jsreactjs

How to Change the Appearance of Elements in an Array Using React.js

My situation involves an array receiving data from an API, and I'm looking to customize each button's appearance by giving them different background colors. In addition, my project includes Material UI... Below is the snippet of code I have - {op ...

cssreactjsapimaterial-uitailwind-css

Variables for HTML comment form using PHP mail

How do I properly pass HTML form variables to a PHP mailer? The PHP code is: $comment = $_POST['comment']; $email = $_POST['email']; $to = '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60131313 ...

phphtmlformsvariablesmailer

What might be causing the jQuery UI Spinner arrow buttons to not appear?

Once I implemented a very basic version of the jQuery UI Spinner Widget, I encountered an issue where the up and down arrow buttons were not displaying. Clicking on the area where the buttons should be triggered the Spinner events and the number incremente ...

htmljquerycssjquery-uibootstrap-4

Looking to showcase this information using an HTML Ajax jquery call

{"response":{"refno":"hfc","status":"Status : Reference number does not exist."}} After sending a request to a specific webpage, I received a response in JSON format. I am looking for a way to display this response in HTML, either in a table format or a s ...

jqueryhtmlajax

Transforming data from PHP JSON format into HTML output

Struggling to convert JSON data into HTML format? Having trouble maintaining the correct order of child elements in your structure? Here's a solution: Take a look at this example JSON: { "tag": "html", "children": [ { "ta ...

phphtmljsondom

Adding hyperlinks that do not redirect

I have 2 separate divs displayed on a website: <button class="form-control margin btn btn-warning hide_all" id="addLinks">Link Pages</button> <button style="display: none" class="form-control margin btn btn-primary hide_all" id="hideLinks"& ...

javascriptjqueryhtmllaravel-blade

Strategies for eliminating all elements with a particular innerHTML content

function removeElements() { let li = document.getElementsByClassName("li"); for (var i = 0; i < li.length; i++) { if (li[i].innerHTML === "hello") { li[i].parentElement.remove(); } } } <li> <span class="li">hi</sp ...

javascripthtmljquery

Denied running the inline script in Redocly

Experimenting with redoc-cli (https://github.com/Redocly/redoc/) in order to generate static documentation. Unfortunately, encountered some stumbling blocks due to errors related to the Content-Security-Policy, which seems to be blocking JavaScript code ex ...

javascripthtmlcontent-security-policy

Tips on how to perfectly position an element in the middle of an HTML

I am struggling to get the textarea element centered using margin: 0 auto. I even attempted to place the element inside a div with margin: 0 auto style. <div style="margin: 0 auto;"> <textarea rows="4" cols"100"></textare> </div& ...

htmlcss

The combination of MUI CardContent and flexBox seems to have issues when used in conjunction with typography and chips

Take a look at this React code using MUI. It's designed to create a Card that showcases Character Information. const CharacterPreview = ({ characterKey }: CharacterPreviewProps) => { return ( <Card sx={{ maxWidth: 256, borderRadius: 4 }}&g ...

javascriptcssreactjsflexboxmaterial-ui