Mobile alignment

[jslooten]

Hi Guys,

I recently bought this theme, but I have to say that I find it very difficult to change the website. Fortunately, I was able to import a demo that came close to my taste. However, I have a problem, the website looks good on a computer, but not on a mobile phone, there is a lot of misalignment, and I have no idea how to fix it. Can anyone help me with that?

1. Red --> The logo is beeing displayed at the left corner, not at the center of the header.
2. Blue --> There is no padding at the top.
3. Purple/Yellow --> The text/title are being placed at the right of the webpage, but this needs to be at the center.!
4. Brown --> Countdown; the seconds are displayed with a break, this needs to on one line.

See the pictures.

Hope you guys can help me.

Website: https://www.sonrisehuizen.nl/

Regards,
Job

[ruenel]

Hello Job,

Thanks for writing in!

1.) By default, when using the Renew stack, the logo in smaller screens will be displayed on the left side while the mobile menu is on the right.

2.) There is no longer a space between the navbar and your first section because in your fist section settings, you have added -2.5em top margin.

Please remove the negative margins and set it to 0.

3.) This is because of a negative margin added to the text element.

Again, please set it the margins to auto instead so that it will always stay at the middle.

4.) This is a combination of your margin and padding settings. Kindly both the left and right margin and paddings to 0 or auto so that there is enough space to display the time in one line.

If this is NOT helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/docs/getting-support

Regards.

[jslooten]

Hi Ruenel,

Thank you for your reply.

1). Oke, but how can we change this?
2) & 3) Thanks, I found it! Now it looks good on the mobile phone, but not on the desktop… How can I make changes that only effect the desktop view or only the mobile view? See both pictures. Also, can you explain me how to create “breaks” in the purple marked title section? (only at mobile view)
4) Thanks!

[jslooten]

[friech]

Hi J,

1.) In the X > Theme Options > Header > Layout, you have two options, Inline and Stacked, Stacked is the one that will center your logo on both desktop and mobile. No, there is no option to inline in desktop and stacked on mobile you need to do that with a custom CSS.

2.) First, you set the `max-width` to `none`

And the margins to 0

@jslooten

Also, can you explain me how to create “breaks” in the purple marked title section? (only at mobile view)

You can use a <br> tag to force break you title/text.

I would advise that you review how the Content Builder/Cornerstone works.

Creating Layouts
Adding Elements

Thanks,