[Resolved] Increasing mobile width to max and reducing padding left and right

[William]

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

[Leo]

Hi William,

Are you referring to the 15px left and right padding here?
https://www.screencast.com/t/B3zDQyyLB

If so that’s loaded by bootstrap and it’s overwriting the theme’s CSS.

Take a look at David’s suggestion here:
https://generatepress.com/forums/topic/full-width-section-without-affecting-the-layout/#post-1655625

Hope this helps 🙂

[William]

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;
	}
}

[Leo]

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.

[William]

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

[Leo]

Yes exactly.

Bootstrap isn’t something you want to load unless absolutely necessary 🙂

It will likely slow your site down.

[William]

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!

[Leo]

Haha I’ve had the last couple days off.

Plus it’s pretty quiet in the forum today.

[Author]

Posts