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

Adjust the dimensions of the canvas without disrupting the existing artwork

Express-minify is having trouble loading the CSS file. If we remove a portion of the file, it should be able

Design a circular progress bar with a cut-off at the bottom

Update the class name of an element depending on the URL

Implementing a Vue.js v-bind:style attribute onto a dynamically generated element post-page initialization

Using PHP to utilize logical OR or AND operators when adding a class to the global navigation's list items

Embedding SVG or image code within the </style> tags is a common practice in web development

When a <dl> element is nested within an <ol>, it will be rendered as a list format

Using jQuery to animate one widget with the login widget

Eliminate jQuery's delayed blinking effect with the use of an event

Setting up Stylelint in a Next.js project: A step-by-step guide

Placing a gradient background in front of two divs

Is there a way to align these buttons in the middle?

What is the process for locating and displaying a database in WordPress?

CSS for a navigation menu with underlined links

Tips for defining conditions within the style attribute in JSP

The nested table is overflowing beyond the boundaries of its outer parent table

What is the best way to choose a specific div within a container that contains additional HTML elements?

How can I create two left-aligned columns in CSS, with the first column being fixed in place?

Adjust the parent container to match the height of the child container when it is being hovered