Make it in the same line

1

Hi guys, i’m new here :slight_smile:
I have 2 pictures and element between them. I want to make them stay in the same line. it works in codepen but when I want to publish it, it opens in a different tab and moves the second picture down.
What can I do?
thanks!!

image

2

Can you link to the codepen? It will be easier to play with it by others and then offer suggestions to you.

3

When I click “Embed” I have a new window with the page I made, over there you can see that the second picture moves down.
When I open it in Debug mode it’s fine, but the head line with the 2 pictures is in the left, how can I center it? I tried but it doesn’t work, I think because of the “row”.
Or maybe I made it fine, it is just on this view…

4

It looks like you’re using Bootstrap 3 classes (col-xs-*) but you’re linking to Bootstrap 4 CSS in your codepen settings.

There is no .col-xs-* classes in BS4. For BS4, it just needs to be .col-n (where n=1,2,3,4…12)

If you change your code to .col-4, you’ll see it will resize properly.

5

thanks, but it doesn’t look any better. The pictures stay in the line but the sentence itself is going down to the next lines…

6

It will be easier to get it right if you design for small screens first and then use media queries to adjust the layout and font size as you resize the screen. You can’t expect a long title in 54px and two images to fit on the same line on mobile (and even on tablets in this case).

7

well, i’ve started to learn to code 2 days ago with this website :slight_smile:
In one of the steps it says that I can make it works and adjust the size to a mobile with class=“img-responsive”. Isn’t it enough? maybe I should do something simillar to the title?
And how can I see if I design for a laptop or a mobile and where can I change it? If I code for a mobile, how can I adjust it to a tablet or a laptop?

8

The most basic thing you can do to emulate a small screen is to resize your window so that it has a narrow width. The width of the viewport varies for various devices but you can get a general idea by looking at Bootstrap’s responsive breakpoints. For example they consider that anything narrower than 576px is a phone in portrait mode. I tend to design for 320px width (size of iPhones 4 and 5) and even resize to narrower to see if it still looks at least ok.

Also Chrome has a cool emulation feature in its developer tools that allows you to see the page as it would look in various devices. It’s not perfect but very useful.

1 Like
9

Just noticed that img-responsive has been renamed img-fluid in bootstrap 4. It doesn’t seem to affect your page though. This is how it’s defined:

.img-fluid {
  max-width: 100%;
  height: auto;
}

All it does is prevent the image from displaying bigger than its parent’s width and adjust the height automatically.

For the title you can have a look at Boostrap 4’s example for Responsive Typography. Alternatively you can use media queries directly:

  • you define your CSS for small screen: that’s your starting point, e.g. (with completely made up values)
h1 {
   font-size: 1.5em;
}
  • you progressively make the window larger and you identify at what width it starts looking wrong
  • you write a media query to change it for larger sizes, e.g.
@media screen and (min-width: 600px){
  h1 {
    font-size: 2em;
  }
}
  • and you keep going through the process until you’re happy that it looks good at all widths.

To be honest, I find the process rather time consuming (but I’m still learning!). Maybe you can just design your project for desktop for now and come back and make it responsive at a later stage.

10

Thanks a lot!! I don’t familiar with media query yet, it is still all new for me. Thanks for all the advices. I think I will keep it the same fort now and won’t adjust it to mobile. I’ll learn more here and improve by time. You gave me cool tricks and I’ll definetly use it :slight_smile: