[Support request] Problems at lower screen resolutions

[Gary]

Hi,

I’m designing a website using GeneratePress and Elementor. I essentially started by using one of your GeneratePress sites from the library called Sider to get the vertical navigation. All was going well until I realised that there are some display problems at lower resolutions like 1200 pixels wide which is typical on some 10″ and 11″ notebooks. In particular the price table looks odd but other sections are also getting tight for space.

Now I don’t really want to revert to a horizontal navigation for this website. I noticed another of your sites uses vertical navigation but the navigation pane is narrower. Is it possible I could reduce to width of the sider theme navigation panel in the hope it will give me extra breathing room for the main content. If so where is this code and what would I need to change it to?

Thanks
Gary

[David]

Hi Gary,

you need to make some changes in the Additional CSS. This set of rules below, which i have commented the two lines you need to adjust:

@media (min-width: 1000px) {
	body {
		padding: 0 0px 0px;
		margin-left: 300px; /* Change to match site-header width */
	}

	.site-header {
		position: fixed;
		left: 0;
		top: 0;
		width: 300px; /* adjust width */
		z-index: 300; 
		height: 100%;
		overflow: auto;
		overflow-x: hidden;
		-webkit-backface-visibility: hidden;
		-webkit-overflow-scrolling: touch;
		transition: .1s ease;
	}
	
	.admin-bar .site-header {
		top: 32px;
	}
	
	.site-header .main-navigation li {
		float: none;
	}
}

[Author]

Posts