Mobile view on University

pill-tassie

In Univeristy, i have 2 issues on mobile display. The logo text does not resize and is covering nearly all the page. Furthermore only on mobile view the bg appears, making my footer text unreadable. See screen shot.

Joshua-M

Hi,
Try to add the following custom css code:

@media (max-width: 680px) {
	body {
		background: transparent;
	}
	#gkLogo.text > span {
		font-size: 17px;
		line-height: 1.4;
	}

	#gkLogo.text .gkLogoSlogan {
		font-size: 10px;
		margin-top: 0;
	}

}

and remove white color of your footer (from override.css file).

Cheers

pill-tassie

Joshua-M
That works perfectly on the homepage. On other pages on mobile it removes the backgroundheader. Please see screenshots. Also the title page does not reduce in size.

Joshua-M

Hi,
Try to modify my previous code to:


@media (max-width: 680px) {
	body.frontpage {
		background: transparent;
	}
	#gkLogo.text > span {
		font-size: 17px;
		line-height: 1.4;
	}

	#gkPageTitle {
		font-size: 18px;
	}

	#gkLogo.text .gkLogoSlogan {
		font-size: 10px;
		margin-top: 0;
	}

}

but you'll have to add frontpage suffix to your frontpage menu item, please check Method 1 from this article:
https://www.gavick.com/documentation/joomla/templates/customization/multiple-background-images

pill-tassie

Thx that did the trick!!

Joshua-M

Great to hear that, so I'm closing the thread.

Cheers