Reorganize HTML elements for improved responsiveness on various devices

Question

Reorganize HTML elements for improved responsiveness on various devices

Looking for a CSS-only solution to move an element under specific conditions based on width breakpoints.

Breakpoints are already defined in the stylesheets for mobile styling, but need the icon to display below content at certain widths.

The page displays a repeating list of items with number, text, and icon that switch positions. Must remain responsive without using float due to varying content lengths.

Desktop view example can be seen here: JS Fiddle. Handles long text well while keeping the layout fluid.

For mobile, the icon should extend full width and appear below the text.

Current issue is the icon switching position between repeated items when resized.

Is there a way to use CSS3 to relocate the icon within each item specifically for mobile?

Mobile preview of the current setup can be viewed here. The goal is to have the icon consistently below the text without fixed dimensions.

Some numbers correctly display the icon below the text, while others do not.

Any suggestions or solutions would be appreciated. Thank you!

css mobile responsive-design transformation flexbox

Answer 1

Answer №1

To accomplish this task, utilize the power of flexbox along with the flex-flow and order attributes to alter orientation and arrangement of elements.

Answer 2

To accomplish this task, utilize the power of flexbox along with the flex-flow and order attributes to alter orientation and arrangement of elements.

Answer 3

Answer №2

To optimize display for narrow devices, use the following CSS:

http://codepen.io/cimmanon/pen/BJleF

.view-reasons .views-reasons-row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.view-reasons .views-field-field-icon {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}

Make sure to enclose them within the necessary media query. This code is compatible with Opera, Chrome, IE10, Firefox, and most mobile browsers except Opera Mini (see: http://caniuse.com/#feat=flexbox).

Answer 4

To optimize display for narrow devices, use the following CSS:

http://codepen.io/cimmanon/pen/BJleF

.view-reasons .views-reasons-row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.view-reasons .views-field-field-icon {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}

Make sure to enclose them within the necessary media query. This code is compatible with Opera, Chrome, IE10, Firefox, and most mobile browsers except Opera Mini (see: http://caniuse.com/#feat=flexbox).

Answer 5

Answer №3

I have recreated your fiddle HERE

You will find 6 rows, all of which are working in the same manner.

The first 2 rows are based on your original example.

For the remaining 4 rows, I have switched your original class to "row" while maintaining the same order. The styling applied to make the even rows appear differently is:

The key technique involves using absolute positioning for the image and aligning it to the right. (The majority of the rest of the code belongs to you)

.row {
    border-bottom:1px dotted #464637;
    padding-bottom:15px;
    margin-bottom:15px;
    min-height: 150px;
}

.row .views-field-field-icon{
    display:inline-block;
    width:41%;
    margin-right: 0;
}

.row:nth-child(even) .views-field-field-icon{
    position: absolute;
    right: 0px;
    padding-right: 6%;
}

Answer 6

I have recreated your fiddle HERE

You will find 6 rows, all of which are working in the same manner.

The first 2 rows are based on your original example.

For the remaining 4 rows, I have switched your original class to "row" while maintaining the same order. The styling applied to make the even rows appear differently is:

The key technique involves using absolute positioning for the image and aligning it to the right. (The majority of the rest of the code belongs to you)

.row {
    border-bottom:1px dotted #464637;
    padding-bottom:15px;
    margin-bottom:15px;
    min-height: 150px;
}

.row .views-field-field-icon{
    display:inline-block;
    width:41%;
    margin-right: 0;
}

.row:nth-child(even) .views-field-field-icon{
    position: absolute;
    right: 0px;
    padding-right: 6%;
}

Answer 7

Answer №4

Another option is to utilize the css3 :nth-of-type selector, as recommended in vals' previous response,

Check out this demonstration

(I have modified the class names, but you can still reference it, I believe)

You can also experiment with resizing the browser window to observe the effects of media queries.

Answer 8

Another option is to utilize the css3 :nth-of-type selector, as recommended in vals' previous response,

Check out this demonstration

(I have modified the class names, but you can still reference it, I believe)

You can also experiment with resizing the browser window to observe the effects of media queries.

Answer 9

Answer №5

If you don't have a script handy, you won't be able to "reorder HTML blocks," but with some clever CSS tricks, you can create the illusion of doing so.

Check out my personal website nicksaemenes.com (still a work in progress), to see if it achieves what you're trying to do — I believe it does. You can access all the source code for it on Githubhttps://github.com/nicksaemenes/nicksaemenes.github.io.

You might want to investigate why your HTML is switching the order of icons/images and paragraphs. In this case, consistency in the source order could be a better approach.

Although not as refined as my live website, this Codepen project demonstrates the early stages of developing my site, which might provide a clearer insight into achieving what appears to be your goal.

...

Answer 10

If you don't have a script handy, you won't be able to "reorder HTML blocks," but with some clever CSS tricks, you can create the illusion of doing so.

Check out my personal website nicksaemenes.com (still a work in progress), to see if it achieves what you're trying to do — I believe it does. You can access all the source code for it on Githubhttps://github.com/nicksaemenes/nicksaemenes.github.io.

You might want to investigate why your HTML is switching the order of icons/images and paragraphs. In this case, consistency in the source order could be a better approach.

Although not as refined as my live website, this Codepen project demonstrates the early stages of developing my site, which might provide a clearer insight into achieving what appears to be your goal.

...

Reorganize HTML elements for improved responsiveness on various devices

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Creating a reusable component in Angular with a shared selector

How to Toggle the Submit Button Using jQuery

Is there a way I can replicate this expandable div?

Dynamic change of table cell text color based on condition utilizing ng-if and ng-style

I'm having trouble displaying my background image unless I specifically set the height in pixels or viewport height

My goal is to create text that is opaque against a backdrop of transparency

Issues with Bootstrap offsetting columns within a fluid row

Enhancing the style of the top menu Index by applying a border-bottom effect when hovering over it in a CSS Horizontal Drop Down Menu

Clicking on the ajax tab control in asp.net displays a single rectangular box - how can this be removed?

Guide to changing the border color in a Material-UI TextField component styled with an outline design

Attempting to eliminate the padding from the unordered list (ul) element within the pop-up box

Create a single button that controls checkboxes with the help of HTML, CSS, SCSS, and Bootstrap 4

Exploring the process of customizing native classes with Vue.js

Styling pagination in Angular 8 PrimeNG p-table

How to create a clickable link in a menu using kotlin

Troubleshooting a Hover Problem in Firefox

Is it possible to apply SlideToggle() to Div elements that have their Display property set to Table-Cell?

What is the best way to eliminate the horizontal line in the modal's body and footer?

Having trouble interacting with buttons while an overlay is open

Changing the width of an SVG path from 0 to 100% using CSS