Issues with elements on mobile

Hi
i seem to be having issues with elements when switching to mobile and table view. On desktop view its all fine and all the elements are set to resize. The button hasn’t been changed other than to be fluid. The members bar in the top right is the same. set to fluid. all the text has been set to its min and max and set to fluid. see below

But when I go to the mobile view this happens - see below - the log in bar swaps to the left and the button text won’t resize. With button text i can’t see how to change its behaviour as its part of the buttons behaviour. it also sticks itself to the bottom of the box even though I haven’t asked it to. Any ideas as i’ve run out and spent hours trying to sort this header out already :frowning:

thank you

Hard to see everything that you have going on. However, I would make sure you have enough room for all your content in the mobile header. The menu should switch to a hamburger menu. Move your “logo” name over to the left edge and perhaps. You can put it in one line and have the log in bar reside below both hamburger icon and logo.

It seems as if you still need to style the login bar, which is done by clicking on the paint brush icon (design) and applying your touch.

I recommend adding a GRID to the header with two rows and two columns. Assign the logo to the top left quadrant, the menu to the top right quadrant and the login bar to occupy the bottom row and both columns.

See attached. I hope this helps.

Desktop:


Tablet


Mobile

Thank you - I’ll give that a try :slight_smile:

Nope that didn’t work either…I’ve deleted the header and added a new one and not changed anything and the mobile version doesn’t even show up now! sob sob …this shouldn’t be this hard!

@mina-gourlay In each breakpoint you need to make sure what is visible and what is hidden. Why didn’t my suggestion work for you? Wix X is very intuitive, but yes it takes some time to master.

@teejay Yep I’ve been doing that on each breakpoint. The grids did work for the logo and menu but not for the member login…i have no idea! i’ve opened up the layers tab and everything is there but its just not visible and i can’t even see the element even if I click on it in the layers tab. I’m lost - i’ve deleted the headers and am starting again on each breakpoint - it might be quicker !!!

i really appreciate your time and help - thank you x

When adding the grid and assigning elements, especially like my recommended quadrant of four square, that you click CONTAINER that the membership element is attached to. Then assigned that container to occupy the ROW 1-2 and COLUMN 1-3. Then once assigned, sized and aligned then click center center to place it in the center of the container. You may have fudge a few things.

I think I failed to mention to you that it helps to put elements in grids or boxes to better control them.

Good luck.

Thank you so much…I actually hadn’t done that bit with the container so I will try it… you’re a star :kissing_heart: