Page Builder 
Widgets Bundle 
SiteOrigin CSS 
Installer Vintage Premium: Header problem: Desktop to moblie version
Hi there!
I’m using the vantage theme premium.
On this moment I’m changing the Header, but there’s one problem.
When I putt widgets in the Header, I can’t get the logo and social pictures and tel.number next to each other.
The are shown under each other.
In the mobile version, this is perfect.
But on the desktop version it’s awful.
I’ve tried to put in the next command:
element.style {
margin-top: -95px;
Now it look fine on the desktop version, but the signs are mixed on the mobile version.
What can I do to get this done on all desktops, mobile, etc.?
Here are the print screens to show you what I mean.
Original
Prt sc 01 – Desktop version (wrong)
Prt sc 01 – Mobile verion (good)
with code : margin-top: -95px; (added to the social media)
Prt sc 02 – Desktop version (good)
Prt sc 02 – Mobile version (wrong)
Thanks!!
This is our free support forum. Replies can take several days.
Need fast email support? Get SiteOrigin Premium
Replies
29Hi Enjoyballonvaarten
Thanks for your support.
Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
Hi Andrew,
thanks for your reply.
The URL is:
http://www.enjoyballonvaarten.nl
Thanks, please, can you try editing the Layout Builder widget in the header. Try editing the row, click Layout and change the Row Layout from Full Width – Stretched to Standard.
Thank you very much for your help!
I’ve tried this yesterday on my own, but not with the “standard” setting.
This helps a lot!
Now I have only one question to ask:
How can I get the right column aligned downwards?
So the social media and tel.nr will be aligned to the logo?
Can you perhaps try something else? Can you re-create the header widget area without the Layout Builder? Just insert the two widgets as they are now but directly into the Header widget area. It’ll be easier to assist from that position. Thanks :)
Done that :-)
Could you also remove the logo from the header widget area and insert it from AppearanceTheme SettingsLogo?
I’ve done that, but now I can’t see my logo in the header.
Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:
[email protected]
Just navigate to UsersAdd New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the Send Password field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
Sorry the logo is too big now.
Maybe I’ve to change the image on it self?
This is a private message.
This is a private message.
Some aspect of the site’s Custom CSS is changing the way the header normally functions. I’ll do my best to assist.
What do I have to do now?
Okeej.
Thanks!
Still working on it. Wasn’t Custom CSS. I’m nearly there.
When I’m done you can adjust header padding from CustomizeTheme DesignGeneralHeader Padding. You can also adjust the logo image width size constraint from Custom CSS.
I’ll let you know once I’ve fixed the header widget area.
The basic issues should be fixed: http://www.enjoyballonvaarten.nl/. Sorry, I did go back to the Layout Builder. Can you let me know what final tweaks you want done?
Thank you very much!
When I look on the website without a login than the logo is stretched vertical.
But when I’m in the Customizer, it looks good.
How is this possible?
But apart from that, you helped me very well! Thank you for this!
Maybe I ask for you help in the future :-)!
Sorry that I’ve to ask again.
But if you look on the print screen, you’ll see that the logo on the header is still stretched vertical.
What can be the problem of this?
I only have this problem the browser window is maximized.
When minimalized the logo is normal.
Thanks. Please, check again, you might need to refresh a few times.
I’ve tried it, but I think there’s a higher min-height required.
The only thing I regret is the quite large white area until the “min-height of 1000px” is reached at the moment there is no text.
There must be a way the footer is automatically placed at the bottom of the screen you use?
Regardless of the amount of text?
Apologize for my bad english…
Thanks.
Great!!
Thank you!!!
:-)
Hello, there I’m again :-).
Sorry I have a question again…
On the next link “http://www.enjoyballonvaarten.nl/prijzen/vipvaarten” you’ll see the the footer is too far upwards.
This is not correctly aligned.
It’s on every page, but I keep trying to avoid by adding additional text.
How do I get the footer automatically in place?
Thank you in advance :-)!
Try:
#main { min-height: 1000px; }Adjust as required.
enjoyballonvaarten
I’ve tried it, but I think there’s a higher min-height required.
The only thing I regret is the quite large white area until the “min-height of 1000px” is reached at the moment there is no text.
There must be a way the footer is automatically placed at the bottom of the screen you use?
Regardless of the amount of text?
Apologize for my bad english…
Thanks.
Unfortunately, Vantage doesn’t have a sticky footer. The sticky footer techniques I’ve seen in the past involved JavaScript, I don’t have a quick CSS solution for this challenge. As I’m sure you’re aware, you can adjust the min-height value as required, 1000px was just a suggestion.
Ok.
Thank you!!
For sure :)
Replies on this thread are closed.
Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.