Help aligning an image on top of text when scaling

Bootstrap Studio Help
1

Hi,

Can anyone help me with this problem? It seems very simple but has been causing me a headache for the last couple days.

I'm displaying an image next to a paragraph of text on desktop however when this scales I need the image to then move to sit above the text so it doesn't appeared cramped.

Really appreciate any help with this

Thanks Sam

2

Can you share the mark up as without seeing that or your site it's hard to see what you have done.

4

Hi sorry the block is displayed below. Thanks

`</p>

<p>Lorem ipsum dolor sit amet. </p>

<p> Maecenas non elit ipsum. <br /><br /></p>

<p><img src=“contactus.png” alt=“contact us” class=“center-block” align=“left” style=“float:left; padding-top: 10px; padding-left:10px; padding-right:50px;”></p>

<p> <h5> Donec nisl libero, dictum egestas sapien consequat, ultricies tristique libero</h5></p>

<p>Curabitur sit amet augue porta, tristique erat ac, fringilla ipsum. Integer odio diam, consequat eu diam a, dignissim euismod lectus. Morbi turpis arcu, fringilla eu tortor vitae, tempus imperdiet eros.<br /><br /> </p>

<p><img src=“API.png” alt=“contact us” align=“left” style=“float:left; padding-top: 18px; padding-left:10px; padding-right:50px;”> <h5>Cras massa odio</h5></p>

<p>Curabitur sit amet augue porta, tristique erat ac, fringilla ipsum. Integer odio diam, consequat eu diam a, dignissim euismod lectus. Morbi turpis arcu, fringilla eu tortor vitae, tempus imperdiet eros. Fusce vitae tincidunt mauris. Praesent placerat sit amet elit ac pharetra. Phasellus massa enim, tempor eu posuere non, sagittis non tellus. Vivamus ut sem faucibus, efficitur ex eget, luctus nisi. Donec non quam lorem. Donec eu euismod dolor. <br /><br /> </p>

<p><img src=“travelupdate.png” alt=“contact us” align=“left” style=“float:left; padding-top: 1px; padding-left:10px; padding-right:50px;”> <h5> Suspendisse dapibus vitae risus porta placerat.</h5></p>

<p>Sed posuere sed nibh non venenatis. Donec lobortis sapien eu diam maximus, a pellentesque nisl faucibus. Vivamus tincidunt nec quam accumsan viverra. Etiam interdum cursus nibh, sit amet interdum neque euismod ac.<br /><br /> </p>

<p><img src=“ticket.png” alt=“contact us” align=“left” style=“float:left; padding-top: 3px; padding-left:10px; padding-right:50px;”> <h5> Vestibulum sollicitudin </h5></p>

<p>Praesent placerat sit amet elit ac pharetra. hasellus massa enim, tempor eu posuere non, sagittis non tellus. </p>

<p>`

5

This is the support forum for Bootstrap Studio, an app for creating responsive websites. Are you a BSS user?

6

Based on your supplied code,

Here is your updated HTML

<p>Lorem ipsum dolor sit amet. </p>

<p> Maecenas non elit ipsum. <br /><br /></p>

<img src="contactus.png" alt="contact us" />

<h5> Donec nisl libero, dictum egestas sapien consequat, ultricies tristique libero</h5>

<p>Curabitur sit amet augue porta, tristique erat ac, fringilla ipsum. Integer odio diam, consequat eu diam a, dignissim euismod lectus. Morbi turpis arcu, fringilla eu tortor vitae, tempus imperdiet eros.<br /><br /> </p>

<img src="API.png" alt="contact us" /> <h5>Cras massa odio</h5>

<p>Curabitur sit amet augue porta, tristique erat ac, fringilla ipsum. Integer odio diam, consequat eu diam a, dignissim euismod lectus. Morbi turpis arcu, fringilla eu tortor vitae, tempus imperdiet eros. Fusce vitae tincidunt mauris. Praesent placerat sit amet elit ac pharetra. Phasellus massa enim, tempor eu posuere non, sagittis non tellus. Vivamus ut sem faucibus, efficitur ex eget, luctus nisi. Donec non quam lorem. Donec eu euismod dolor. <br /><br /> </p>

<img src="travelupdate.png" alt="contact us" /> <h5> Suspendisse dapibus vitae risus porta placerat.</h5>

<p>Sed posuere sed nibh non venenatis. Donec lobortis sapien eu diam maximus, a pellentesque nisl faucibus. Vivamus tincidunt nec quam accumsan viverra. Etiam interdum cursus nibh, sit amet interdum neque euismod ac.<br /><br /> </p>

<img src="ticket.png" alt="contact us" /> <h5> Vestibulum sollicitudin </h5>

<p>Praesent placerat sit amet elit ac pharetra. hasellus massa enim, tempor eu posuere non, sagittis non tellus. </p>

Here is your CSS

@media (min-width:992px;){ //laptop and greater device sizes.
    .contact-img,
    .api-img,
    .travel-img,
    .ticket-img{
        float:left;
        padding-left:10px;
        padding-right:50px;
    }
    .contact-img{
        padding-top:10px;
    }
    .api-img{
        padding-top:18px;
    }
    .travel-img{
        padding-top:1px;
    }
    .ticket-img{
        padding-top:3px;
    }
}

I moved your inline stylesheet code into classes on the images then created a media query to apply that code for screen sizes greater then 991px.

I also removed your paragraph tags from around the images and image/headings because headings are not supposed to be in paragraphs.

Saj

P.S. That was weird the classes on the images didn't make it in so I just updated the code with that.

7

Once again it stripped out the classes on the code image tags

So for reference, you need to add the following classes to the the obvious images

 class="contact-img"
 class="api-img"
 class="travel-img"
 class="ticket-img"
8

Hi Saj

Thanks for the help

The code you provided puts the photo on top of the text however I want it to be to the side of the text but when scaled it moves to on top of the text

Thanks again Sam

9

Ok, so I see a couple bugs.

The @media (min-width:922px;) needs to have the ";" removed so it reads as @media (min-width:922px).

Also remove the comment //laptop and greater device sizes.

Along with making sure you added the classes to the appropriate images.

Adjust the media queries "min-width" to whatever you want the break point to be at for when you want the images to be positioned to the left.

Other then that, it should work as you originally asked. When viewed on a screen smaller that 992px wide the images will be stack if the screen size is at least 992px wide then the images will be positioned to the left.

Saj

10

Thank you Saj! Lifesaver