Adjust Tiny Mobile Header Height Default Theme

Software Support
1

Hello, seeking a bit of help with some CSS …

Description of issue or problem I’m having:

The Default Theme header height on mobile screen sizes is too small for my background image. I have adjusted large-screen height, but no luck yet figuring out which style(s) to adjust for small/mobile screens. What is the best cross-browser method to increase height when using a text site title?

What I tried to resolve the issue:

I understand just enough about CSS to be dangerous, especially re: multiple screen sizes. Tried a bunch of stuff in a custom style sheet, in browsers, but did not work and searched the forum.

Application Version - OJS 3.3.0.8:

https://ejssm.com/ojs/index.php/site/index

Thanks, in advance.

2

try adding this to your css

.pkp_site_nav_toggle {
    height: 6rem;
}
.pkp_structure_content{
	padding-bottom: 6rem;
}
.pkp_site_name .is_text {
    padding-top: 6rem;
}

output should be like this
estorm

3

Thank you! Sadly this did not work…

4

try add this to your css

.pkp_site_name_wrapper, .pkp_navigation_primary_wrapper, .pkp_navigation_user, .pkp_search_mobile, .pkp_structure_content, .pkp_structure_footer {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-left: .714rem;
    padding-right: .714rem;
    padding-bottom: 6rem;
}

if the output did not change, you can try to clear template cache or try different browser. or maybe you can post your current css code and we can see from there.

5

Thank you! I actually started over with the style sheet, using only your suggestions and some font changes. The small screen header is good now, except that the font size does not adjust to fit the screen width. Any suggestions would be very appreciated.

CSS:
@import url(‘https://fonts.googleapis.com/css2?family=Quattrocento:wght@400;700&display=swap’);

.pkp_site_name { font-family:“Quatrocento”,“Noto Sans”,-apple-system,BlinkMacSystemFont,“Segoe UI”,“Roboto”,“Oxygen-Sans”,“Ubuntu”,“Cantarell”,“Helvetica Neue”,serif;}

.pkp_site_name .is_text {
font-family:“Quattrocento”,“Noto Sans”,-apple-system,BlinkMacSystemFont,“Segoe UI”,“Roboto”,“Oxygen-Sans”,“Ubuntu”,“Cantarell”,“Helvetica Neue”,serif;
font-size:2.2rem;
font-weight: 400;
line-height:5rem;
}

.pkp_structure_main h1 {
font-family:“Quattrocento”,“Noto Sans”,-apple-system,BlinkMacSystemFont,“Segoe UI”,“Roboto”,“Oxygen-Sans”,“Ubuntu”,“Cantarell”,“Helvetica Neue”,serif;
font-size:1.714rem;
line-height:2.143rem;
font-weight:400
}
.pkp_structure_main h2 {
font-family:“Quattrocento”,“Noto Sans”,-apple-system,BlinkMacSystemFont,“Segoe UI”,“Roboto”,“Oxygen-Sans”,“Ubuntu”,“Cantarell”,“Helvetica Neue”,serif;
font-size:1.285rem;
line-height:2.143rem;
font-weight:400
}
.pkp_structure_main h3 {
font-family:“Quattrocento”,“Noto Sans”,-apple-system,BlinkMacSystemFont,“Segoe UI”,“Roboto”,“Oxygen-Sans”,“Ubuntu”,“Cantarell”,“Helvetica Neue”,serif;
font-size:1.143rem;
line-height:1.43rem;
font-weight:400
}

.pkp_site_nav_toggle {
height: 5rem;
}
.pkp_structure_content{
padding-bottom: 6rem;
}
.pkp_site_name .is_text {
padding-top: 6rem;
}
.pkp_site_name_wrapper {
height: 5rem;
}