Need your Suggestions

HTML-CSS
1

Hello everyone, So I’m making a tribute page mobile responsive. But I don’t know where the picture should go, that kid picture. Between the para’s or where? Can you suggest?

Here is the link:

2

This is what my page looks like on an iPad:

IMG_1281
IMG_12812134×736 156 KB

And this is what I want my page to look like on phones (Canva screenshot):

IMG_1280
IMG_12801155×886 154 KB

I’m working on making my page responsive, and I want the paragraph to split, with half beside the picture and the other half below it. If I’m right, media queries can’t achieve split the para’s.

Is there any way to do this? I would really appreciate your help!

3

hey @masoomaqasim5 ,
the second one sure does look more cleaner (in my opinion)!

1 Like
4

On my computer the picture is like in the middle of the text maybe try making it look more like the Canva screenshot. :smiley:

1 Like
5

Put the text before the floated image element. Also, if the image is inside a container I would suggest you float the container.

Making it look good can be difficult. It really depends on a lot of factors that often needs to be adjusted by hand. Such as, the size of the image and the amount of text, the line length (max-width on the text container), the font family, the font size, the line height, etc. And any adjustment made will sort of “break” depending on the viewport width.

Just as an aside, margin and padding should be used to make small adjustments. If you have very large values for either it is often because your layout is not constructed correctly, and you are trying to compensate for it by forcing elements into certain positions.

Example code 
<section class="container">
  <h1>Some Title</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, numquam odit itaque ipsa obcaecati deserunt? Numquam, excepturi veritatis esse, facere, saepe perferendis fugiat aut minus quidem delectus eligendi dolorum quam.</p>
  <div class="float">
    <img src="https://images.unsplash.com/photo-1729706046487-d757c331564b?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MzExNzQ0NTN8&ixlib=rb-4.0.3&q=85" alt="">
  </div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis adipisci necessitatibus sunt sequi consequuntur odit alias itaque a esse quisquam? Molestias inventore, impedit ipsa reprehenderit nemo autem tenetur nobis doloremque? Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis adipisci necessitatibus sunt sequi consequuntur odit alias itaque a esse quisquam? Molestias inventore, impedit ipsa reprehenderit nemo autem tenetur nobis doloremque?</p>
</section>

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

body {
  font-family: "Poppins", sans-serif;
  font-size: 1.125rem;
  line-height: 1.4;
  margin: 0;
}

.container {
  width: min(720px, 85%);
  margin-inline: auto;
}

img {
  display: block;
  max-width: 100%;
  border-radius: 20px;
}

h1 {
  text-align: center;
}

.float {
  float: right;
  width: 200px;
  margin-left: 0.5rem;
}
1 Like
6

I think u all are not getting me. let me explain you my problem.

So the first picture is of my main code.

“https://codepen.io/Masooma-Qasim/full/WNVzWpZ ”

Now I want to make my page mobile responsive, and I designed the page on canva first so I can easily make the change in media query.

But the problem is, that p.

I want to split that p on mobile view like in the second image. But I don’t know how.

7

Hi there!

You can break the text into two separate

tags. Wrap them with a flex container and adjust the layout based on screen size.

Example Code

html

<div class="container">
    <img src="image.jpg" alt="Description">
    <div class="text-container">
        <p class="text-half">First half of the paragraph.</p>
        <p class="text-half">Second half of the paragraph.</p>
    </div>
</div>

CSS

.container {
    display: flex;
    flex-wrap: wrap;
}

.text-container {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.text-half {
    flex: 1;
}

@media (min-width: 768px) {
    .text-container {
        flex-direction: row;
    }
}
1 Like