Using various alignment options for images on mobile devices

Question

Using various alignment options for images on mobile devices

I've designed a theme with two columns, one for text and the other for images. I've structured it in HTML to display as:

Text - Img
Img - Text
Text - Img
Img - Text
Text - Img
Img - Text

However, for mobile responsiveness, I want it to display as:

Text - Img
Text - Img
Text - Img
Text - Img
Text - Img

This is my column code:

.one-half,
.three-sixths,
.two-fourths {
width: 48.4375%;
line-height: 1.2875;
}

Here's the HTML code:

<div class="one-half first"></div>
<div class="one-half"></div>

Is there a way to make this change only for mobile devices using HTML or CSS? If so, how can I achieve that?

Visit My Site

wordpress css wordpress-theming

Answer 1

Answer №1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.one-half-first
{
float:left;
width:300px;
}
.one-half
{
float:left;
width:300px;
}
.clear
{
clear:both;
}
@media all and (max-width: 500px) and (min-width: 200px)
{
.one-half-first
{
float:left;
width:100px;
position:relative;
left:20px;
}
.one-half
{
float:left;
width:100px;
position:relative;
left:100px;
}
.one-half img
{
width:50px;
height:auto;
}
.clear
{
clear:both;
}

}
</style>
</head>

<body>

<div class="one-half-first">ihbdbgrbgbdfvv vfv sfviuhisdv ksbihv ijbsiv ibisfv ibisv
monjonsv kbniksfv kinsviknv nionsiov iknbibsv nklnosv ibdscihbdbgrbgbdfvv vfv sfviuhisdv ksbihv ijbsiv ibisfv ibisv
monjonsv kbniksfv kinsviknv nionsiov iknbibsv nklnosv ibdscihbdbgrbgbdfvv vfv sfviuhisdv ksbihv ijbsiv ibisfv ibisv
monjonsv kbniksfv kinsviknv nionsiov iknbibsv nklnosv ibdsc</div>
  <div class="one-half"><img src="file:///C|/tribhuvan/s2 dump/DCIM/sms/2012-08-14 10.29.41-1.jpg" width="300" height="200" /></div>
<div class="clear"></div>
<div class="one-half"><img src="file:///C|/tribhuvan/s2 dump/DCIM/sms/2012-08-14 10.29.41-1.jpg" width="300" height="200" /></div>
<div class="one-half-first">ihbibdsc ihbdbgrbgbdfvv vfv sfviuhisdv ksbihv ijbsiv ibisfv ibisv
monjonsv kbniksfv kinsviknv nionsiov iknbibsv nklnosv ibdscihbdbgrbgbdfvv vfv sfviuhisdv ksbihv ijbsiv ibisfv ibisv
monjonsv kbniksfv kinsviknv nionsiov iknbibsv nklnosv ibdscihbdbgrbgbdfvv vfv sfviuhisdv ksbihv ijbsiv ibisfv ibisv
monjonsv kbniksfv kinsviknv nionsiov iknbibsv nklnosv ibdsc</div>

<div class="clear"></div>
<div class="one-half-first">ihbibdsc ihbdbgrbgbdfvv vfv sfviuhisdv ksbihv ijbsiv ibisfv ibisv
monjonsv kbniksfv kinsviknv nionsiov iknbibsv nklnosv ibdscihbdbgrbgbdfvv vfv sfviuhisdv ksbihv ijbsiv ibisfv ibisv
monjonsv kbniksfv kinsviknv nionsiov iknbibsv nklnosv ibdscihbdbgrbgbdfvv vfv sfviuhisdv ksbihv ijbsiv ibisfv ibisv
monjonsv kbniksfv kinsviknv nionsiov iknbibsv nklnosv ibdsc</div>
  <div class="one-half"><img src="file:///C|/tribhuvan/s2 dump/DCIM/sms/2012-08-14 10.29.41-1.jpg" width="300" height="200" /></div>
<div class="clear"></div>
</body>
</html>

give this a shot as it should be helpful to you. If you encounter any other issues or if this code doesn't work with your setup, please reach out to me so I can offer alternative solutions tailored to your needs.

Answer 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.one-half-first
{
float:left;
width:300px;
}
.one-half
{
float:left;
width:300px;
}
.clear
{
clear:both;
}
@media all and (max-width: 500px) and (min-width: 200px)
{
.one-half-first
{
float:left;
width:100px;
position:relative;
left:20px;
}
.one-half
{
float:left;
width:100px;
position:relative;
left:100px;
}
.one-half img
{
width:50px;
height:auto;
}
.clear
{
clear:both;
}

}
</style>
</head>

<body>

<div class="one-half-first">ihbdbgrbgbdfvv vfv sfviuhisdv ksbihv ijbsiv ibisfv ibisv
monjonsv kbniksfv kinsviknv nionsiov iknbibsv nklnosv ibdscihbdbgrbgbdfvv vfv sfviuhisdv ksbihv ijbsiv ibisfv ibisv
monjonsv kbniksfv kinsviknv nionsiov iknbibsv nklnosv ibdscihbdbgrbgbdfvv vfv sfviuhisdv ksbihv ijbsiv ibisfv ibisv
monjonsv kbniksfv kinsviknv nionsiov iknbibsv nklnosv ibdsc</div>
  <div class="one-half"><img src="file:///C|/tribhuvan/s2 dump/DCIM/sms/2012-08-14 10.29.41-1.jpg" width="300" height="200" /></div>
<div class="clear"></div>
<div class="one-half"><img src="file:///C|/tribhuvan/s2 dump/DCIM/sms/2012-08-14 10.29.41-1.jpg" width="300" height="200" /></div>
<div class="one-half-first">ihbibdsc ihbdbgrbgbdfvv vfv sfviuhisdv ksbihv ijbsiv ibisfv ibisv
monjonsv kbniksfv kinsviknv nionsiov iknbibsv nklnosv ibdscihbdbgrbgbdfvv vfv sfviuhisdv ksbihv ijbsiv ibisfv ibisv
monjonsv kbniksfv kinsviknv nionsiov iknbibsv nklnosv ibdscihbdbgrbgbdfvv vfv sfviuhisdv ksbihv ijbsiv ibisfv ibisv
monjonsv kbniksfv kinsviknv nionsiov iknbibsv nklnosv ibdsc</div>

<div class="clear"></div>
<div class="one-half-first">ihbibdsc ihbdbgrbgbdfvv vfv sfviuhisdv ksbihv ijbsiv ibisfv ibisv
monjonsv kbniksfv kinsviknv nionsiov iknbibsv nklnosv ibdscihbdbgrbgbdfvv vfv sfviuhisdv ksbihv ijbsiv ibisfv ibisv
monjonsv kbniksfv kinsviknv nionsiov iknbibsv nklnosv ibdscihbdbgrbgbdfvv vfv sfviuhisdv ksbihv ijbsiv ibisfv ibisv
monjonsv kbniksfv kinsviknv nionsiov iknbibsv nklnosv ibdsc</div>
  <div class="one-half"><img src="file:///C|/tribhuvan/s2 dump/DCIM/sms/2012-08-14 10.29.41-1.jpg" width="300" height="200" /></div>
<div class="clear"></div>
</body>
</html>

give this a shot as it should be helpful to you. If you encounter any other issues or if this code doesn't work with your setup, please reach out to me so I can offer alternative solutions tailored to your needs.

Using various alignment options for images on mobile devices

Answer №1

Similar questions

Is it possible to customize the placement of the login or register success message?

CSS-only Tooltip: text is getting truncated

The inline variables in CSS transitions are failing to be detected

The responsiveness of Bootstrap 5 columns in Chrome inspection appears to break after reaching medium size, yet functions properly in other areas

css background is repeating after the height of the div is reset

CSS background images struggle to display properly in Safari, often not appearing even when checked in the debugger

Achieving vertical alignment and stretching of subchild within a flexbox element

Is there a way to insert and store a personalized field in the WordPress Gutenberg (block editor) dashboard?

Tips for creating fully stretched columns within Bootstrap framework

Maximizing Content Width in FullCalendar v5 to Ensure Screen Compatibility

React- hiding div with hover effect not functioning as expected

Creating a stylish CSS shadow effect for a collection of elements

Show me how to customize the default confirmation box using just CSS!

Tips for modifying the text color of radio button choices in HTML and CSS

Transforming hover interactions into onclick events involves adjusting the CSS and JavaScript

Styles created using makeStyles in MUI are no longer working properly following an update to both MUI and React versions

Tips for customizing the border radius style of the menu in Vuetify's v-autocomplete component

CSS positioning with absolute value + determine the number of elements positioned above

What are some effective ways to analyze jQuery and JavaScript using web development tools?

Is it possible to move between textboxes using arrow keys in HTML?