Site logo

Archived topic

Increasing mobile width to max and reducing padding left and right

7 replies · Started by William on February 20, 2021

Viewing posts 1–8 of 8
#1666065

Hi there,

I am playing with the customizer and I can't seem to make what I am trying to achieve.

Basically, to have the sides of mobile and padding the same here (old theme) as it will be for the new theme (here).

What is the best way to do this with GeneratePress?

Kind regards,

Will

#1666079

Ah gotcha, thank you - so it's being dictated by CSS elsewhere. Confusing is I don't see where this is being applied? I have two CSS areas. One with WordPress Customizer and one with CSSHero. I've copied each below just so you can ctrl+f like I did that there's nothing in them that could be causing this?

body {
    overflow-x: hidden !important;
}
.modal{
	z-index: 99999 !important;
}
#ajaxsearchprores1_1{
	margin: 36px 0 0 0;
	z-index: 2147483647 !important;
}
@media (min-width: 768px) {
article.post .inside-article{
position: relative;
    border: 1px solid #e9ecef;
    padding: 40px;
    margin-top: -1px;
    margin-left: -1px;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    background: #fff;

}
}

.generate-columns {
    margin-bottom: 0px;
    padding-left: 0px;
}

.auto-hide-sticky.has-branding.has-sticky-branding.main-navigation.sub-menu-right.stuckElement {
	box-shadow: 0px 0px 4px rgba(0, 0, 0, .4);
}
.main-navigation .inside-navigation{
	position: relative;
    z-index: 99999;
}
.page-title {
	line-height: 1;
	margin-bottom: 0;
}

/* Author Box CSS */
.author-box {
	background: #ffffff;
	padding: 40px;
	overflow: hidden;
	margin-top: 20px;
	margin-bottom: 20px;
	box-shadow: 0 0px 1px rgba(192, 192, 192, 0.3), 0 1px 4px rgba(217, 217, 217);
}

.author-box-avatar {
	float: left;
	margin: 0 20px 20px 0;
}

.author-box-avatar img {
	border-radius: 100%;
	border: 5px solid #f1f1f1;
}

.author-box-description h5 {
	font-size: 22px;
	margin-bottom: 10px;
	font-weight: bold;
	text-transform: capitalize;
}

@media (max-width: 1020px) {
	.page-title {
		font-size: 2.8rem;
	}
}

@media (min-width: 1020px) {
	.page-title {
		font-size: 4.rem;
	}
}

/* Search bar header CSS */
.nav-align-right .inside-navigation {
	justify-content: flex-start;
}

.nav-align-right .navigation-branding {
	margin-right: 30px;
}

.nav-align-right .custom-search-form {
	margin-right: auto;
}

.navigation-branding img,
.site-logo.mobile-header-logo img {
	height: 80px;
}
.main-navigation .menu-bar-item.search-item{
	display: none;
}
/* Mobile items ordering */
#mobile-header .menu-toggle {
    order: -1;
    margin-right: auto;
}
#mobile-header .menu-bar-items {
    padding: 0 10px 0 0;
}
#mobile-header .site-logo {
    margin-left: 0;
}

/* Search header CSS */ 
.custom-search-form {
width: 35%;
}

/* Featured image/post title padding */

	.page-hero .post-title {
	padding-top: 80px;
}
	
@media (max-width: 1020px) {
	.page-hero .post-title {
	padding-top: 50px;
	}
}

.sticky-enabled .main-navigation.is_stuck {
    box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .1);
}
/* 12.01.2021 */
@media (max-width: 1020px){
	.main-navigation .menu-bar-item.search-item{
	display: block;
}
.navigation-search.nav-search-active{
	  top: 65px;
    width: 95%;
    margin: auto;
    border: 1px solid #8B8C8C;
	border-radius: 4px;
}
.navigation-search input[type="search"]{
	height: 40px;
	border-radius: 4px;
	position: relative;
	opacity: 1;
}
}

blockquote {
    font-style: normal;
    color: #222;
    background-color: #f7f8f9;
    border-left: 5px solid #888;
		box-shadow: 0px 0px 5px rgba(0, 0, 0, .3);
		border-radius: 5px;
}

.wp-block-getwid-post-slider__post-excerpt {
    display: none;
}

@media (max-width: 1000px) {
	.srch-wrap{
		
	}
#ajaxsearchpro1_1 .probox .proinput input.orig, #ajaxsearchpro1_2 .probox .proinput input.orig, div.asp_m.asp_m_1 .probox .proinput input.orig{
	    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	}
.menu-bar-item.search-item {
	display: none !important;
}
	
.cus-icon {
	position: absolute;
	display:none;
	top: 100%;
	left: 0;
	z-index: 10;
	width: 100%;
	padding: 2.5rem 15px 3rem;
	background: #F2F4F6;
	/*-webkit-box-shadow: 0 5px 15px 0 rgb(0 0 0 / 10%);
	box-shadow: 0 5px 15px 0 rgb(0 0 0 / 10%);*/
	z-index: -1;
}
#ajaxsearchprores1_1{
	margin-top: 15px !important;
}
/*#mobile-header{
		position: fixed;
}*/
#mobile-header .fa-search{
	color: #454545;
	background: transparent !important;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px;	
    box-sizing: border-box;
}
#mobile-header .active-srchh{
	color: #696969;
	background: #d6d6d6 !important;
}
.site-content{
	overflow-x: hidden;
}
/*	i#search-icon:hover{
		color: #696969;
		background: #d6d6d6 !important;
	    width: 20px;
	    height: 20px;
	    border-radius: 5px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    padding: 15px;
	    box-sizing: border-box;
	}*/	
}  
@media (max-width: 575px) {
/*.ugb-main-block .ugb-inner-block{
	padding-top: 50px;
}*/

#ajaxsearchpro1_1 {
    width: 100%;
    padding-left: 0;
}
#ajaxsearchprores1_1{
	margin-top: 15px !important;
}
#mobile-header .menu-toggle {
    position: relative;
    z-index: 99999;
}
i#search-icon {
    position: absolute;
    right: 10px;
    top: 22px;
}
	i#search-icon:focus{
		opacity: 0.4 !important;
	}
#mobile-header .site-logo {
    margin-left: 0;
    left: auto;
    right: auto;
    position: relative;
    top: -60px;
    width: 100%;
    border-bottom-color: transparent;
    box-shadow: 0px 0px 4px rgb(0 0 0 / 40%);
}
#mobile-header .site-logo a{
	margin: auto;
}
/*#mobile-header{
	position: fixed;
}*/
.poetry-button{
	display: none !important;
}
.menu-bar-item.search-item {
	display: none !important;
}
	
.cus-icon {
	position: absolute;
	display:none;
	top: 100%;
	left: 0;
	z-index: 10;
	width: 100%;
	padding: 2.5rem 15px 3rem;
	background: #F2F4F6;
	/*-webkit-box-shadow: 0 5px 15px 0 rgb(0 0 0 / 10%);
	box-shadow: 0 5px 15px 0 rgb(0 0 0 / 10%);*/
	z-index: -1;
}
.wp-block-column{
	min-height: 130px;
}
.ugb-main-block.ugb--has-block-background.alignfull.alignfull.alignfull.alignfull{
	padding-bottom: 0;
}
.main-navigation.slideout-navigation .main-nav > ul > li > a {
    line-height: 50px;
}
#ajaxsearchpro1_1 .probox, #ajaxsearchpro1_2 .probox, div.asp_m.asp_m_1 .probox{
	height: 50px;
}
div.asp_m.asp_m_1 .probox .promagnifier div.innericon{
	height: 50px;
}
.main-navigation .inside-navigation{
	height: 70px;
}
.site-content{
	overflow-x: hidden;
}	
}

And CSSHero:

@import url("https://fonts.googleapis.com/css?family=Open+Sans|");

/* Request a Poem CSS */
.poetry-button {
	padding: 12px;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, .2);
	border-radius: 5px;
	color: rgb(254, 254, 254) !important;
	background-color: rgb(58, 84, 96);
}

a:hover.poetry-button {
	background-color: #698593;
}

a:active.poetry-button {
	background-color: rgb(58, 84, 96);
}

/* Glossary page buttons CSS */
.glossary-categories {
	padding-top: 20px;
}

a.glos-cat-noncurrent {
	padding: 10px;
	background-color: #f9f9f9;
	color: #555;
	.inner-shadow(0, 0px, 5px, 0, 0.1);
	border-radius: 5px;
	transition-duration: 200ms;
}

a:hover.glos-cat-noncurrent {
	color: #444;
	background-color: #e9e9e9;
	.inner-shadow(0, 0px, 5px, 0, 0.05);
	transition-duration: 200ms;
}

a.glos-cat-current {
	padding: 10px;
	background-color: #666;
	color: #fff;
	position: relative;
	top: 20px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
	border-radius: 5px;
	transition-duration: 200ms;
}

a:hover.glos-cat-current {
	background-color: #777;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, .3);
	transition-duration: 200ms;
}

.main-navigation.mobile-header-navigation {
	background-color: rgb(255, 255, 255) !important;
}

article.post .inside-article {
	border-radius: 5px;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, .1);
	padding: 20px;
}

.sidebar .widget {
	border-radius: 5px;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, .1);
}

span.cat-first-letter {
	border-radius: 5px;
}

#wps-toc-wrapper.wps-shortcode-wrapper .wps-inner-wrapper {
	border-radius: 5px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, .3);
}

.size-full {
	border-radius: 5px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, .3);
}

#wps-alert.wps-shortcode-wrapper.wps-alert-primary {
	border-radius: 5px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, .3);
}

.is-right-sidebar {

}

#wps-toc-wrapper.wps-shortcode-wrapper .wps-inner-wrapper .wps-toc-title {

}

.author-box {
	border-radius: 5px;
}

#wp-subscribe.wp-subscribe-2 {
	box-shadow: 0px 0px 4px rgba(0, 0, 0, .5);
	border-radius: 5px;
}

#wp-subscribe.wp-subscribe-2 h4 {
	font-family: open sans;
	font-size: 21px;
}

#wp-subscribe.wp-subscribe-2 .submit {
	font-weight: 600;
	border-radius: 5px;
}

.entry-content:not(:first-child) blockquote {
	border-radius: 5px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, .3);
}

.main-navigation ul ul {
	border-radius: 5px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, .4);
}

.main-navigation ul ul a:hover {
	border-radius: 5px;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, .3);
}

#wp-subscribe.wp-subscribe-1 {
	border-radius: 5px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
}

/* Link CSS */
.entry-content a:hover {
	text-decoration: underline;
}

#wp-subscribe.wp-subscribe-1 .submit {
	border-radius: 5px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
}

#wp-subscribe.wp-subscribe-1 h4 {
	font-family: Open Sans;
	font-size: 21px;
}

.footer-widgets .widget a:hover {
	text-decoration: underline;
}

.sidebar .widget a:hover {
	text-decoration: underline;
}

html>.post-template-default.post-image-above-header.post-image-aligned-center>#page>#content>#primary>#main>div {
	border-radius: 5px;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, .1);
}

.wp-block-image img {
	box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
	border-radius: 5px;
}

.separate-containers .inside-article {
	padding: 30px;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, .1);
	border-radius: 5px
}

.main-navigation.has-branding .inside-navigation.grid-container {

}

.main-navigation {
	box-shadow: 0px 0px 4px rgba(0, 0, 0, .1);
}

.generate-columns-container .page-header {
	background: none;
}

.page-hero .inside-page-hero.grid-container {
	background-color: #f7f8f9;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	padding-bottom: 1px;
	border-radius: 5px;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, .2);
	margin-left: -10px;
	margin-right: -10px;
}

@media screen and (max-width:768px) {
	.page-hero .post-title {

}
}

@media screen and (max-width:320px) {
	.page-hero .post-title {
		font-size: 40px;
	}
}
#1666083

I can't go through all of your CSS for you unfortunately.

Bootstrap is a library:
https://getbootstrap.com/

GP doesn't add it by default. If you didn't implement it, then try disabling all plugins except GP Premium to test.

#1666084

Gotcha - I need to overhaul all the code so by default Generate Press gives the look I'm after (before bootstrap does something)?

#1666087

Yes exactly.

Bootstrap isn't something you want to load unless absolutely necessary :)

It will likely slow your site down.

#1666088

Okay, thank you Leo :) I'm a little scared just how quick you were to respond by the way - GP the most support on the internet!

#1666090

Haha I've had the last couple days off.

Plus it's pretty quiet in the forum today.

This archived topic is closed to new replies.

Start building better websites today.

Get Started
GeneratePress

GeneratePress

Solutions

Support

© 2026 EDGE22 Studios Ltd. GeneratePress® is a registered trademark.