I need some advice on how to apply this custom css also on tablet and small screen. Currently it works on Desktop but on small screens it adds to much space between.

/*Kein Space zwischen Headings & Paragraph*/
p.has-text-align-center, h4 {
margin-top: -20px;
}

Thanks for any advice

/* Masthead */
#masthead.site-header {
height: 70px!important;
margin-bottom:0px
}

/* Mobile CSS for Masthead */
@media only screen and (max-width: 500px) {
#masthead.site-header {
height: 150px!important;
margin-bottom:0px;
}

.menu-wrapper {
background: #29646b;
}

@media screen and (min-width: 500px){
.menu-wrapper { max-width: 575px;
}}

@media (max-width: 100px){
.main-navigation ul a {
background: #8db5b5;
color: white !important;
}}

I found a function localize_global_data() in the class-assets.php but in it the behavior is registered simply by an option ‘screenSizes’ => array( 320, 576, 768, 992, 1200 ). I would like to change that.

@media only screen and (max-width: 800px) {
???????????? {
font-size: 12px;
}
}

I’ve tried using CSS media query to override it, but I haven’t been able to do this.

Can you advise, please?

When the theme is shrunk to tablet or phone, the fonts reduces in size as expected to the default font (11px) – which suits those devices.

But the code below is not quite achieving what I want in desktop view. All the text is suitably enlarged (16px), except the header menu’s sub-menu text. The font size at the top of the menu is fine, but the submenu text is too small default size.

Sample page: LINK.

Can you suggest some code to fix this?

Thanks.

Current media screen CSS:

@media only screen and (min-width: 1024px) {
    p {
        font-size: 16px;
    }
   li {
        font-size: 16px;
    }
    blockquote, q {
         font-size: 20px;
    }
   ul {
        font-size: 16px;
    }
}

I am completing a CSS / HTML menu on site:
www.mariasandy.com

It looks alright in full screen, but shrink the browser and the menu items start to move down the page.

This is the menu CSS, would someone please help me to get it maintain its position on the screen, when the browser is resized.
I have a mobile menu sorted out, the problem is just on browsers that aren’t full screen.

.main-navigation {
	background: url('images/nav.png') repeat-x;
	clear: both;
	display: block;
	float: left; /* CHANGED FROM none */
	width: 100%;
	height: 55px;
}
.main-navigation ul {
	font-size: 17px;
	list-style: none;
	margin: 0 0 0 -0.8125em;
	padding-left:25%;
	padding-right: 25%;
}
.main-navigation li {
	float: left;
	position: relative;
}
.main-navigation a {
	font-family: "adobe-garamond-pro";
	font-weight: 700;
	color: #fff;
	display: block;
	line-height: 42px;
	padding: 0 15px;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: normal;
	text-shadow: 1px 1px 3px #222;
	letter-spacing: 1px;
	text-decoration: none;
}
.main-navigation ul ul {
	display: none;
	float: left;
	margin: 0;
	position: absolute;
	top: 42px;
	left: 0;
	width: 188px;
	z-index: 99999;
	text-align: center;
}
.main-navigation ul ul ul {
	left: 100%;
	top: 0;
}
.main-navigation ul ul a {
	background: #643a11;
	color: #fff;
	font-size: 13px;
	font-weight: normal;
	height: auto;
	line-height: 1.4em;
	padding: 10px 10px;
	width: 168px;
	text-transform: capitalize;
	border-bottom: 1px solid #EFEFD2;
}
.main-navigation ul ul li:hover a ,
.main-navigation .sub-menu .current-menu-item > a,
.main-navigation .sub-menu .current-menu-ancestor > a,
.main-navigation .sub-menu .current_page_item > a,
.main-navigation .sub-menu .current_page_ancestor > a,
.main-navigation .sub-menu .current-page-ancestor > a {
	background: #845223;
	color:#FFF;
	text-shadow: 0 0 0 transparent;
}
.main-navigation li:hover > a,
.main-navigation ul ul :hover > a,
.main-navigation a:focus {
	/*background: url('images/hover.png');*/
	color:#422B14;
	text-shadow: 0 0 0 transparent;
}
.main-navigation ul li:hover > ul {
	display: block;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-page-ancestor > a {
	background: url('images/hover.png');
}

I could align it with a DIV, but using a WordPress theme don’t know how to get a menu aligned.
Thanks very much.

.job-manager-application-wrapper .application .application_button,.single_job_listing .application .application_button{ display: block; }
.job-manager-application-wrapper .application,.single_job_listing .application{ padding:0; margin:0 0 1em; overflow:hidden; }

But still the button is not displayed. How to fix this?

Thanks

https://www.ads-software.com/plugins/wp-job-manager/