This topic has 48 replies, 2 voices, and was last updated 9 years by 
-
-
Because I have a simple thin header I get an enormous space between header and any page heading. Checking out previous questions in the forum I found this css to reduce header size.
.header-bg.clearfix {
height: 100px !important;
}I tested various sizes to find the optimum size to reduce the unwanted space. This worked fine in laptop and desktop sizes. However in tablet and mobile sizes the page heading overlaps the responsive header. Is there anything I can do?
A couple more points about the responsive view.
The profile and Log Out/In buttons are quite large when viewed in responsive mode for mobile. Perhaps they can be smaller.
The page links are now listed as ‘please select your page’. It could be replaced with a smaller symbol (as typical in mobile apps) that was not as wide.
If the above were in one line in the mobile version there would not be an overlap. Or this could be something I use in conjunction with any css you give me to solve the problem.
Thanks in advance
Hello, could you share a link to your website so i can build a css for you? 🙂
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
The url is http://www.charitydate.club.
The problem is site wide and each page is slightly different as per space between header and page heading. Please check out this one too: http://charitydate.club/membership-account/membership-levels-2/
If you go to http://charitydate.club/browse-members/ and do a search the results page comes up with the geo my wp horizontal bar even further at the top, and even more of a problem in mobile view.
Thanks
Hello, can you share an user so i can test? Also please share screenshots 🙂
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Attached two screenshots. Please note that in the mobile size the drop down button for the nav links sits behind the front page image!
Some of the other pages (see search above) will be even worse. Ideally I’d like to prevent any overlap and have slightly smaller buttons on the mobile view.
I appreciate your help!
Hello, will work on the css for the mobile site, please give me some time so i can test some stuff, will let you know 🙂
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Hello, for front page, try adding this to child theme style.css or quick css
COPY CODE@media (max-width: 991px) { .article-content { margin-top: 70px; } }Please let me know if it fixes other pages. If not please share a screenshot 🙂
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Hi,
I reduced the size of the header a little to narrow the gap and I still get the same visual result as above screenshots. Pretty much where I was. To clarify what I have in css I have pasted below (in case there is a conflict; also nav button size is not responding).
* Please add your custom styles below
*/
@media only screen and (max-width: 767px) {
.reveal-modal, .reveal-modal.small, .reveal-modal.medium, .reveal-modal.large, .reveal-modal.xlarge {
width: 80% !important;
top: 15px !important;
left: 50% !important;
margin-left: -40%;
padding: 20px !important;
height: auto;
}
}
.six.columns {
color: black;
}
.header-bg.clearfix {
height: 60px !important;
}
}
@media (max-width: 991px) {
.article-content {
margin-top: 20px;
}
}
.navbar-nav li > a {
font-size: 16px !important;
}Hmm something is wrong in that code, please replace with
COPY CODE@media only screen and (max-width: 767px) { .reveal-modal, .reveal-modal.small, .reveal-modal.medium, .reveal-modal.large, .reveal-modal.xlarge { width: 80% !important; top: 15px !important; left: 50% !important; margin-left: -40%; padding: 20px !important; height: auto; } } .six.columns { color: black; } .header-bg.clearfix { height: 60px !important; } @media (max-width: 991px) { .article-content { margin-top: 20px; } } .navbar-nav li > a { font-size: 16px !important; }Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Unfortunately no change has occurred. Same gap, overlaps and font size. (I did clear cache and save changes).
Could you specify what is the exact look you want? Maybe we are missin something
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
I am trying to achieve a narrow header and no overlap in mobile view.
The look is fine in desktop view. Reduce the browser size and everything is messed up. The page content covers header content!
(Compare the screenshots above or visit any of the pages listed above. Be sure to sign in with the details above.)
Hello, please try with
COPY CODE@media (max-width: 991px) { .article-content { margin-top: 50p !important; } }Let me know 🙂
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
I’d be grateful if you went into my admin and looked at editor yourself and checked the pages in full and mobile view. There are many posts in this article and it may be getting confusing….
All you need to get in is in posts above.
Thanks in advance!
Hello, will check it out and let you know in some minutes 🙂
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Hello, please try with:
COPY CODE@media (max-width: 991px) { .article-content { margin-top: 90px; } #header { position: absolute; z-index: 1; } }Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Hello, i dont see the excess here, could you share any screenshot maybe?
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
The attachment you have above says it all. The white space between the bottom of honeys and the top of search is huge. I’d like a very small space between them.
Many websites now have slim banners. It helps to make more space above the fold. I am sure you know this.
Here is an example: https://www.chameleonsocial.com/
Hello, the design of the theme is focused in minimalist and modern look, if you still want to take that space off, please add this to style.css 🙂
COPY CODE#main { padding-top: 0px !important; }Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Sorry to bother you, but that’s not working.
It’s a complete mystery to me as to why my site has a huge space between header and content while your demo is fine!! http://seventhqueen.com/demo/sweetdatewp/ (Also with the responsive view which I told you about in above posts)
I think I am going to go back to exactly what you have above in your demo and work out from there. I’ll save all my work and reset to default and start again.
Will that work? Anything I should know first? I think I need to upload the images again/ or should I do a complete new upload? I also have a child theme installed…
It’s that important to me and I am running out of time.
Thanks
Hello, there is no need to do that, please try the css i posted above, it should fix it
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
I have more for you. Taken away the child theme, header logo and image from my front page. Compare these screenshots:
I just want mine to look like yours!
Regards,
Hello, i see, i can set it up for you, just the main page?
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Hello, i will need admin credentials 🙂
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Hello, seems like you need a reinstall of the theme, may i have ftp credentials to do it? 🙂
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Hello, ok, i could login, am i allowed to begin with the demo reinstall? 🙂
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Hello, reinstalled it, did you notice any change? Let me know so i can help you 🙂
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
There is an error with the installation:
function.implode]: Invalid arguments passed in /home/content/91/12054691/html/wp-content/themes/sweetdate/framework/theme_options.php on line 1519
message on theme page: The active theme is broken. Reverting to the default theme.
Hello, should be fine now, let me know if you want more changes 🙂
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Oh, I am still having the same problem (sort of). I changed the height of the background image and now I have a large white gap between the revolution slider and a new kleo section containing my body content.
I tried to change the size of the rev slider but only seem to be able to change the grid size. I think the problem may be with the rev slider page size still being similar to the original image size.
What can I do?
Thanks
You must be logged in to reply to this topic.
