page title and header on mobile

Hi,
1. Try adding this to your custom css box in Theme Options > Custom CSS:

@media (max-width: 768px) {
#kad-blog-grid .blog_item .entry-title {
    min-height: 20px;
    margin-top: 0;
}
}

2. I’m seeing this transparent. Have you tried clearing your mobile cache? Can you send a screenshot?

3. I’m not seeing that either. Can you send a screenshot? https://postimage.org/

Hannah

Hi Hannah, thank you very much.
2) settled itself, I don’t know why it was showing me the bar, anyhow, this is fine.
3) I changed header background from white to a different color and looks nice, I would only gladly get rid of the small white bar that remains, if possible (screenshot)

1) My fault I didn’t express myself clearly here and was changing the code back and forth after posting. So:
-on full laptop view I see this
-on mobile it’s this

I think what I need a code that would set my H1 to show proportional, so smaller, on mobile.

3. I’m not seeing any white line covering the menu, but I assume you’re referring to the white bar at the top of the page?
If so, this CSS should remove it for you:

header#kad-banner {
    margin-top: 0;
}

1. Did you change this again? When I view your site, it’s appearing quite differently than the screenshots.

-Kevin

3. That is outputting from this css:

@media (max-width: 6000px) {
@media (max-width: 767px) {
.headerclass {
    margin-top: 10px;
}
}
}

Are you adding that?

1. It looks like you’ve added quite a bit of css that is adding all this spacing. Can you tell what is in your css?

Hannah

Hi, thank you both! No I did not change that again…

1) I tip towards the settings under Home slider: Home Page Title Padding Top/Bottom, which is 300/200 respectively, and I can change it for mobile for home, but not for other pages. I do have some additional css, but I can’t find anything for this space:

.page-header {
    padding-top: 140px;
    padding-bottom: 110px;
    padding-left: 0px;
}

@media (max-width: 700px) {
.page-header {
    padding-top: 20px;
    padding-bottom: 80px;
    padding-left: 0px;
}
}

@media (max-width: 500px) {
.page-header {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 0px;
}
}

#kad-banner #logo {
   margin-left: 10px;
display:none
}

#kad-blog-grid .blog_item .entry-title {
    min-height: 55px;
}

#kad-blog-grid .blog_item .entry-title {    
text-align: center;
}

#kad-blog-grid .blog_item .entry-content { 
display:none; 
}

.kad-call-button-case {
    align: right;
}

.kad-call-button-case {
    width: 100%;
}

.home_calltoaction .kt-home-call-to-action .kad-call-button-case a.kad-btn-primary.kad-btn.lg-kad-btn {
    font-family: Lora;
    font-size:50px;
    font-weight:600

}

@media (max-width: 767px) {
.home_calltoaction .kt-home-call-to-action .kad-call-button-case a.kad-btn-primary.kad-btn.lg-kad-btn {
    font-family: Lora;
    font-style: italic;
    font-size:20px;
    font-weight:600

 }
}

@media (max-width:500px) {
.home_calltoaction .kt-home-call-to-action .kad-call-button-case a.kad-btn-primary.kad-btn.lg-kad-btn {
    font-family: Lora;
    font-style:  italic;
    font-size:14px;
    font-weight:600
 }
}

@media (max-width: 767px) {
.kt-home-call-to-action {
    padding-top: 95px;
    padding-bottom: 95px;
  }
}

@media (max-width: 500px) {
.kt-home-call-to-action {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

#kad-blog-carousel.blog_item .entry-content { 
display:none; 

#kad-portfolio-grid .blog_item .entry-title {
    min-height: 55px;
}

}
@media (max-width: 767px) {
.kad-page-title.home-page-title {
    font-size: 30px;
}

.trans-header #logo a.brand {
    font-size: 18px;
 }
}

img.aligncenter {
    float: none;
    margin-right: auto;
    margin-left: auto;
}

.aligncenter .alignright:hover {
    opacity: .1 !important;
}

.aligncenter .alignleft:hover {
    opacity: .1 !important;
}

.aligncenter .aligncenter:hover {
    opacity: .1 !important;
}

.post h2 {
	text-align:center;
}

.entry-meta-date {
text-align:center;
}

.cycloneslider-template-standard .cycloneslider-caption-title{
		font-family: Lora; 
font-weight: 300;
text-align: center;

    }
.cycloneslider-template-standard .cycloneslider-caption-description{
		font-family: Lora; 
font-weight: 300;
text-align: center;
}

.subhead {
    text-align: center;
}

@media (max-width: 6000px){
   .kad-topbar-left {width: 0%}
   .kad-topbar-right {width: 100%}
#topbar ul li {
    margin-left: 5px;
}
#topbar {
position: fixed;
width: 100%;
top: 3px;
z-index: 999;
}
.admin-bar #topbar {
top:28px;
}
.headerclass {
margin-top: 0px;
}

.kad-primary-nav ul.sf-menu a {
display: none;
}

img.wp-image-3387:hover {
    opacity: .2;
}

.top-bar-section ul li > a {
  padding: 1px ; 
  padding-left: ; 
}

#footer {
opacity:0.7
}

.portfolio-item .piteminfo h5 {
    color: #cccccc;
}

3) seems I was adding it but no idea what might have been the purpose. I deleted it and it looks ok for some pages not ok for others, but here I think it has to do with the top image proportions.

• This reply was modified 7 years, 3 months ago by kk_admin.

1. Try changing this css:
.page-header {
padding-top: 140px;
padding-bottom: 110px;
padding-left: 0px;
}
to this:

@media (min-width: 992px) {
.page-header {
    padding-top: 140px;
    padding-bottom: 110px;
    padding-left: 0px;
}
}

Does that help?

Hannah

Unfortunately not, but I found out what was the problem. Font size was smaller, but the line height was still like 200 so it would always leave all this space…
I added the below CSS and it’s solved, thought I would share if anyone else stumbles upon such issue:

@media (max-width: 767px) {
.kad-page-title {
    font-size: 40px;
    line-height: 80px;
}
}