I am using vantage premium and facing difficulty in customization. on header after adding contents it is being overlapped by menu bar. Also I am failed to align the contents to top in header.
In footer I using BNS add widget for disclaimer, other content and copyright. Please guide how to customize it. Also I want to customize footer 4 widgets in a row. On adding the widgets beyond four it starts accomodating the widgets in the same row instead of next row.
Please guide.
Hi Amit
You can fix/change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
/* Vantage Header Responsive Breakpoint */@media (max-width: 960px) { body.responsive header#masthead .hgroup { text-align: center; } body.responsive header#masthead .hgroup .logo { float: none; } body.responsive header#masthead .hgroup .logo img { margin: 0 auto; padding-top: 0px !important; padding-bottom: 0px !important; } body.responsive header#masthead .hgroup .support-text, body.responsive header#masthead .hgroup #header-sidebar { position: static; display: block; margin-top: 30px; max-width: 100%; } body.responsive header#masthead .hgroup .support-text img, body.responsive header#masthead .hgroup #header-sidebar img { max-width: 100%; height: auto; } body.responsive header#masthead .hgroup #header-sidebar { padding-top: 0 !important; padding-bottom: 0 !important; height: auto; } body.responsive header#masthead .hgroup #header-sidebar .widget { display: block; margin: 0 auto; float: none; }}You might also need to install the SiteOrigin CSS Editor.
With regards to the footer layout. Please, add the additional widgets you require at Appearance > Widgets > Footer. We’ll help split the footer widget area into a second row once this has been done.
Thanks
Dear Sir / Madam,
My reply/ feedback as below.
1. CSS editor was already installed.
2. Added CSS code provided you.
3. After adding css code, it spoiled the layout in firefox.
4. PAypal logo still not aligned properly. screen shot enclosed below.
5. Added two more widgets at footer.
6. Need single row at footer to diplay disclaimer and other necessary text contents. you may visit http://www.rypm.in for better clarity.
Looking forward your support guidance to proceed further.
[image: Inline image 2]
Thanks for your feedback.
To send images, please, reply directly on the SiteOrigin forum thread and use the Add Media button to upload your media.
Please, ignore the CSS originally sent. We hadn’t seen your site before you sent the link in your last reply.
At Appearance > Custom CSS you have the following rule:
body.responsive.layout-full #page-wrapper .full-container { padding-top: 5px; padding-bottom: 5px; }Please, change that to:
body.responsive.layout-full #main .full-container { padding-top: 5px; padding-bottom: 5px; }If you need to shift the PayPal logo up a little further, edit the SiteOrigin Editor widget and using the Text tab view, remove the empty paragraph tag.
After which footer widget do you want the new row to start? After the Legal heading? Should the next widget be on a new row?
Dear Sir/ MAdam,
Thanks for the support. Replaced the code as instructed by you. Now alignment is much better at header.
Secondly, at footer I need 4 widgets per row. Any widget added thereafter should go in second or next row. The last row should only one widget to cover total page width to have disclaimer , copyright and other informations.
Give this a try:
#footer-widgets .widget { margin-bottom: 25px; width: 25%; } #footer-widgets .widget:last-of-type { margin-bottom: 25px; width: 100%; }Dear Sir/ Madam,
Tried solution given for the footer. the Feedback is as below.
Last widget with row width 100% is working well. Now copyright, disclaimer and other text is therefore aligned as requested. Thnaks for this support.
4 widget per now is yet to be set. If we add 5th widget then it goes below the 4th one in the same row. If we add 6th widget then it goes to next row below widget first. This needs tobe fixed.
Please, add a fifth and six widget so we can see the problem. Thanks.
Dear Sir/ Madam,
Just added meta and events to show you the problem.
Try adding:
#footer-widgets .widget:nth-of-type(5n) { clear: both; }Dear Sir /Madam,
Tried adding the code, and it has resolved the problem.
Thanks for the update. We’re glad to hear the new CSS rule helped.
Dear Sir / Madam,
Though CSS footer has resolved the desktop view however it has deterioarted the mobile view/ layout. Request your intervention to correct it for mobile view too.
Just as a piece of information, earlier the mobile layout was responsive and okay.
Need your support to correct it. Screen shot of mobile is again attached for your reference.
Try adding something like:
@media (max-width: 780px) { #footer-widgets .widget { width: 100%; } }