Help with responsive size reducation

HTML & CSS
1

I have two rows, essentially. The first row shows text on the left and an image on the right.
The next row shows an image on the left and text on the right. It appears well on a larger screen, but I need help reducing it;s size for a smaller screen. I played around with @media screen and (max-width:600px) without success. Any guidance would be appreciated.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
<style>
.j300 {
height: auto;
width: 100%;
color:#fff;
font-size:20px;
font-weight: 100;
font-family:Open sans;
background-color: #282828;
}


.j400 {
height: auto;
width: 100%;
color:#fff;
font-size:20px;
font-weight: 100;
font-family:Open sans;
background-color: #cccccc;
}
</style>

</head>
<body>

<div class="j300">
<span style="display: inline-block; padding:10px 90px 10px 20px;">Text text text text text text text </span><span style="display: inline-block;"><img src="/images/net.png" alt=""></span>
</div>

<div class="j400">
<span style="display: inline-block;"><img src="/images/screen.png" alt=""></span><span style="display: inline-block; padding:10px 40px 10px 60px;">
<br> Text text text text text text text text text text text </span>
 </div>
</body>
</html>
2

Without your code, I don’t know what you have “tried” with media queries, but why are you using inline styles here? Inline styles take precedence over styles in an external CSS file, so you’ve immediately given yourself an unnecessary headache here if you want to adjust these at smaller screen sizes…

(And why the use of <span> rather than a more semantically meaningful tag?)

Edit:
What are you trying to achieve with media queries? The same layout scaled down, the images above their associated text, the images below their associated text, or something else? I know folk here are good, but as far as I know, nobody possesses a crystal ball. :crystal_ball: Please explain clearly and post all relevant code.

1 Like
3

I’m trying to have the same layout scaled down.
I haven the padding inline, because it relates to the text, not the image.
How could I do that in external css?
This is the only relevant code to my question.
Thanks for any additional help.

4

I don’t understand your reasoning, but:

<div class="j300">
<span class="onespan">Text text text text text text text </span><span><img src="/images/net.png" alt=""></span>
</div>

<div class="j400">
<span><img src="/images/screen.png" alt=""></span><span class="otherspan">
<br> Text text text text text text text text text text text </span>
 </div>

.j300 span, .j400 span {display: inline-block;}

.onespan {padding: 10px 90px 10px 20px;}

.otherspan {padding:10px 40px 10px 60px;}

Feel free to use more sensible class names. As I have no clue as to what your structure or content is, it was hard to come up with anything meaningful.

No, your media query code is also relevant, as are the images, and especially the image dimensions (which should, of course, be included in the HTML).

5

Thanks for that help. Much appreciated.

The images are 500 x 230

I didn’t add any media query because what I had tried didn’t work.
Currently this code stacks the text on top of the image in the first row, and the image stacked on top of the text in the second row. I’d like “the same layout scaled down”.

@media screen and (max-width:600px) {

.j300 {
display: inline-block;
height: auto;
width: auto;
color:#fff;
font-size:12px;
font-weight: 100;
font-family:Open sans;
background-color: #000fff;
}


.j400 {
display: inline-block;
height: auto;
width: auto;
color:#fff;
font-size:12px;
font-weight: 100;
font-family:Open sans;
background-color: #800000;
}

.onespan{
padding:5%;
display:inline-block;
}


.otherspan{
padding:5%;
display:inline-block;
}
}
6

You can’t use inline block without width because if you add more text then the block will take up the whole line. You’d be better off using flex if only modern browsers support is required otherwise you would need to apply width to your inline blocks or use floats or display:table/table-cell.

Here’s an example using flex.


(View on codepen to see full width)

That should give you some idea of how to go about it :slight_smile:

1 Like
7

Thank you for your reply.
Greatly appreciated.
I copied your code over to test, and it appears that the images stack on top of the text (over visa versa) when viewed via iPhone… Can you help me make it so the desktop screen version appears in the smaller screen “the same layout (as desktop view) scaled down”?
I look forward to any additional guidance.

8

You continue to post insufficient code. Why?

Don’t you think it would be beneficial to post the non-working media query and let us (1) explain why it doesn’t work, and (2) show you a media query that does work per your specs?

Are you here to place an order and have us fill it, or are you here to learn, grow you knowledge?

Are you saying that you want the text beside the image in the mobile view also? Don’t you think that a very small image and very tall column of text will look awkward?

Or maybe you want the image to always be above the text in the mobile view (whereas Paul’s current view alternages those positions)?

It’s interesting how much we have to guess, or how much you don’t communicate, isn’t it.

9

I then did post media query right before Paul OB’s reply

10

But it sounds like it does not accomplish what you wanted.

Would you respond to the rest of my post, please?

11

Thanks for your reply.
Yes, I’m saying that I “want the text beside the image” I won’t know if it “looks awkward” until I look at it. Regarding “we have to guess”, I’ve stated “the same layout reduced” at least four times in this posting, sorry if I haven’t been clear enough, I’m trying to be. Also, Yes, I post insufficient code and ask for help.If my code was sufficient, I wouldn’t need help.
I appreciate any help, much thanks again.

12

“Sufficient code” might not be correct but it would indicate where you were coming from, what you are trying to do and how the page is built.
“Insufficient code” lacks some of the above. It expects us to be mind readers.
“Correct code” wouldn’t need help.

Then copy @PaulOB’s code to a page on your computer and omit or comment out the media query, then examine the behavior of the image and columns at all widths.

For testing the layout without the media query, you might want to add this to the CSS so the image begins shrinking sooner thus leaving more room for the text at intermediate widths.

.row .img-wrap {
    max-width:50%;
}

Feedback, expressing what you see versus what you would like to see is expected.

2 Likes
13

I’ve added that to this codepen so the OP can see what the effect is :slight_smile:

2 Likes
15

Thanks for all the help. Much appreciated.
The only thing I’ve tried (and failed) to tweak is that in the media query view it appears to have right and left margins (white space), rather than 100% width. Any suggestion to get it to full with in the smaller screen view?

16

Just remove the padding from .wrap
If you need more space add margin:0; to body

17

Thanks for that reply.
After testing different scenarios with Code Pen code, I’m using that code (thanks again) but with this media query:


 @media screen and (max-width:600px) {
.row {
	flex-wrap:wrap
}
.row > * {
	flex:1 0 100%;
}

.img-wrap img {
	width:auto;
}
}

Of course I have another question. In the full view the ‘odd-row’ has the image on the right and the ‘even-row’ has the image on the left - which looks good.

In the media query smaller screen view the ‘odd-row’ has the image on the bottom and the ‘even-row’ has the image on the top - which doesn’t look good. Is it possible to change the ‘even-row’ image to be on the bottom in the media query smaller view (but keep the full view the same)?
Any guidance will be appreciated.

18

Yes, you can revert back to unset on the order property.
Refer back to the links I gave you in your other thread so you can learn about flexbox.

If your going to start your media rules @ 600px I think you should allow the image to scale down a bit beforehand. You are only leaving a 100px window for text as it is. Increase the flex-basis on the .text-block a bit.

.text-block {
  flex: 1 0 30%; /*allow image to scale some before 600px media rules*/
}

Paul started the media rules at 800px in the 1st example and the flex: 1 0 0%; worked fine in that case.

This should take care of all adjustments you mentioned and the flex-basis increase I mentioned.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rows left and right 2</title>
<style>
html, body {
  margin: 0; /* added this for body*/
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.wrap {
  max-width: 1280px;
  margin: auto;
  background: #f9f9f9;
  padding: 20px;
}
.row {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 20px;
  font-weight: 100;
  font-family: "Open sans";
  background: #282828;
  border-bottom: 1px solid #fff;
}
.even-row {
  background: #ddd;
}
.row img {
  display: block;
  max-width: 100%;
  height: auto;
  padding: 5px; /*optional*/
}
.text-block {
  flex: 1 0 30%; /*allow image to scale some before 600px media rules*/
}
.even-row .text-block {
  order: 1;
}
.row p {
  padding: 10px 40px;
}

 @media screen and (max-width:600px) {
  .wrap {
    padding:0
  }
  .row {
  	flex-wrap:wrap
  }
  .row > * {
  	flex:1 0 100%;
  }
  .even-row .text-block {
    order: unset; /*reset the order*/
  }
  .row img {
    margin: auto;
  }
}

</style>
</head>
<body>

  <div class="wrap">
  <div class="row odd-row">
    <div class="text-block">
      <p>Text text text text text text text text text text text text text text text text text text text</p>
    </div>
    <div class="img-wrap"><img src="http://via.placeholder.com/500x230" alt="" width="500" height="230"></div>
  </div>
  <div class="row even-row">
    <div class="text-block">
      <p>Text text text text text text text text text text text text text text text text text text text text text text text </p>
    </div>
    <div class="img-wrap"><img src="http://via.placeholder.com/500x230" alt="" width="500" height="230"></div>
  </div>
  <div class="row odd-row">
    <div class="text-block">
      <p>Text text text text text text text text text text text text text text text text text text text</p>
    </div>
    <div class="img-wrap"><img src="http://via.placeholder.com/500x230" alt="" width="500" height="230"></div>
  </div>
  <div class="row even-row">
    <div class="text-block">
      <p>Text text text text text text text text text text text text text text text text text text text text text text text </p>
    </div>
    <div class="img-wrap"><img src="http://via.placeholder.com/500x230" alt="" width="500" height="230"></div>
  </div>
</div>
  
</body>
</html>
2 Likes
19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.