Responsive mobile

Need help Responsiveness
1

Hello!
I’m building the group for the header of my web app. I want to build a header different when the page width is less than 500px (not using text, only icons).

But I have the following problem:

1
11462×97 4.85 KB

This is the view in a computer.

2
21462×97 1.74 KB

This is the view in a mobile device.

Sin título
Sin título809×301 10.2 KB

This is the outcome for my mobile design. How can I distribute the three elements in the same line (and having a tight header)?

In the computer the view, I haven’t had any problem.

Thanks!

2

I think it’s going to be about the margins of those things. And maybe an additional group with 2 of the 3 items in the header.
I suggest also you read this gold nugget My learnings on responsive design

1 Like
3
  1. set your page to 960px
  2. install madewithframes.com
    1. scroll to headers
    2. paste one on your page
  3. adjust to your heart’s content

You can then reverse engineer their system.

5

I will see how Frames work!
Thanks

6

Hi! This is what I have.

3
31447×91 2.56 KB

I have a used a group between logo and search bar, but the problem still happens.

7

Record your screen, shows your editor, and maybe we can figure it out.

Are the in-between groups set to shrink to 1%? Are the items on the left and right set to the correct border alignment?

8

Set minimum width of the two groups between logo and search bar to 1%
For left icon, set its fixed margin to the left in the responsive editor
Then right icon, set its fixed margin to the right in the responsive editor
And for the center icon, set its fixed margin to the centre in the responsive editor
Should fix your problem

9

@mirrowss @rico.trevisan I fixed it!

The problem was that I had grouped the three elements (logo; search bar; and login button). I deleted the group and now it works!

3
31447×91 2.24 KB

Thanks for your help!

1 Like