[Resolved] Theme Update messed up my footer widgets in mobile phone view

[Max]

Hey Tom

Hope you and your family are well.

I run a live site and a backup of it locally on xammp.

I updated the live version but not the local one and so I have identified the bug came from your latest theme update.

I think it is an error in your default style sheet??

In phone view my footer widgets are offset (off screen) 40px to the left.

I have temporarily fixed the problem with the following css patch in my child theme:

@media (max-width:480px) {.site-footer .footer-widgets-container .inside-footer-widgets {
	margin-left:0px
	}}

Any chance you can track down the issue so I can remove my css patch.

Kind Regards

Max

[Tom]

Are you using a child theme? Specifically a custom footer.php file?

The spacing between footer widgets was improved and set up to use an option soon, but this involved changing the structure of the footer widgets a bit.

If not, it would help if you could link me to the site.

Thanks!

[Max]

Yes I am using child theme. But no customer footer .php.

The local version of the site is a direct backup from the live site, prior to your latest theme update.

That is why I believe the issue came from the update.

Below is the css from my child theme.

/*
Theme Name: My GP Child Theme
Description: My GP Child Theme
Author: ME
Template: generatepress
Version: 1.0.0
*/

/* patch to fix GP update 010217*/

@media (max-width:480px) {.site-footer .footer-widgets-container .inside-footer-widgets {
	margin-left:0px
	}}

/*START GP*/

/*REGO REDIRECT PAGE STYLING*/
P.regotext, h3.regotext {margin-left: auto; margin-right: auto; width: 600px; text-align:justify;}
@media (max-width:480px) {P.regotext, h3.regotext {width:100%;}}
/*END REGO REDIRECT*/

/*Remove date and author meta from Popular, Featured and Categories posts*/
.post-1187 .entry-meta, .post-1204 .entry-meta, .post-1165 .entry-meta {display:none;}

/*spacing below masonry posts and top and bottom of excerpt*/
.separate-containers .masonry-post {margin-bottom: -20px; }
.separate-containers .entry-summary {margin-top:10px; margin-bottom:10px;}

/*style info box on start here page*/
.homeinfo {border: 3px solid #eee; padding:10px 10px 10px 10px; 
          margin-top:40px; margin-left:4%;margin-right:8%; font-size:18px; font-weight:100; background:#ebf1d3;}

/*styling for icons for on FAQs page*/
#post-1037 .fa {color:#abb6a6 !important;}
#post-1037 .fa-star {color:#dd6435 !important;}

/* change all bullet points in POSTS and PAGES to circles (BUT exclude stock tickers)*/
.post .inside-article ul, .page .inside-article ul {list-style-type: circle !important;}

/* after change bullets in page post to circle, omit changes from stock ticker feeds*/
.page .stock-ticker-wrapper ul,
.post .stock-ticker-wrapper ul  {list-style-type: none !important;}

/*Add indent and spacing and change bullet point to circle bulletpoint list in Categories SHORTCODE*/
.post-1165 li.cat-item {margin-left:60px; margin-bottom:10px;list-style-type: circle !important;}

/*BLOG SIDEBAR SEARCH added with shortcode [mysearch]*/
/*remove button from search*/
#blogsidebar #searchsubmit {display: none;}

/*style search box*/
#blogsidebar input[type="text"] {width:100%; height:40px; margin-top:20px;}
/*END BLOG SIDEBAR SEARCH*/

/*WIDGET AND WIDGET OUTPUT STYLING*/
/*style gap at bottom of excerpts on popular page from intelliwidget shortcode*/
.widget_intelliwidget .intelliwidget-excerpt {margin-bottom:40px;}

/*styling for intelliwidget shortcode on Popular Articles page*/
.widget_intelliwidget h3.intelliwidget-title {font-size: 1.0em;}
.widget_intelliwidget .intelliwidget-excerpt {font-size: 1.0em;}

/*styling for icon banner in sidebars*/
.icontitle { border: 3px solid #eee;
    font-size:24px; color:#fff; text-align:center; margin-top: 45px; margin-bottom: 20px; padding-top: 5px; padding-bottom:8px;
    background: rgba(255,175,77,1);
    background: -moz-linear-gradient(top, rgba(255,175,77,1) 0%, rgba(241,126,19,1) 85%, rgba(241,126,19,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,175,77,1)), 
    color-stop(85%, rgba(241,126,19,1)), color-stop(100%, rgba(241,126,19,1)));
    background: -webkit-linear-gradient(top, rgba(255,175,77,1) 0%, rgba(241,126,19,1) 85%, rgba(241,126,19,1) 100%);
    background: -o-linear-gradient(top, rgba(255,175,77,1) 0%, rgba(241,126,19,1) 85%, rgba(241,126,19,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,175,77,1) 0%, rgba(241,126,19,1) 85%, rgba(241,126,19,1) 100%);
    background: linear-gradient(to bottom, rgba(255,175,77,1) 0%, rgba(241,126,19,1) 85%, rgba(241,126,19,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4d', endColorstr='#f17e13', GradientType=0 );
}

/*styling for menu links in sidebars  (linkbelow rego is the first below the registration shortcode)*/
.sidelink { margin-bottom:5px;}
.linkbelowrego {margin-top:5px; margin-bottom:5px;}
.footlink { margin-bottom:5px;}
.foottick { margin-bottom:0px; margin-top:5px; font-family: "Montserrat", sans-serif; font-size: 15px; color:#414e44;}

/*This styling for articles and topics second footer widget so Forums heading has margin at top of tablet and phone*/
.footlabel { margin-bottom:10px; font-family: "Montserrat", sans-serif; font-size: 17px; color:#414e44;}
.footlabeltwo {margin-bottom:10px; font-family: "Montserrat", sans-serif; font-size: 17px; color:#414e44;}
@media (max-width:480px) {
.footlabeltwo {margin-bottom:10px; margin-top:40px; font-family: "Montserrat", sans-serif; font-size: 17px; color:#414e44;}}
@media screen and (max-width: 768px) {
.footlabeltwo {margin-bottom:10px; margin-top:40px; font-family: "Montserrat", sans-serif; font-size: 17px; color:#414e44;}}

/*style info box in sidebars*/
.sideinfo {border: 3px solid #eee; padding:10px 5px 10px 5px; margin-top:25px; font-size:13px; background:#ebf1d3;}

/*style info box in footer widget*/
.subinfo {border: 3px solid #eee; padding:10px 5px 10px 5px; margin-top:5px; font-size:13px; background:#ebf1d3;}
/*END WIDGET AND WIDGET OUTPUT STYLING*/    

/*LOG IN OUT*/
/*styling for [my_login] and [my_rego] shortcodes in my functionality plugin*/
.mylogin, .myrego {display: block;}

/*Login out button*/
.button.login, .button.login:visited {
    background:#fff; color:#414e44; border:3px solid #414e44;display:inline-block;
    margin-bottom:20px; box-sizing: border-box;width:100%;text-align: center;}
.button.login:hover, .button.login:active {
     background:#abb6a6; color:#414e44;border:3px solid #414e44;display:inline-block;
    margin-bottom:20px;box-sizing: border-box; width:100%;text-align: center;}
/*END LOG IN OUT*/

/*BUTTON STYLING*/
/*add border radius to ALO Easy mail unsubscribe button*/
.button, input[type=submit] {border-radius:5px;}

/*add rounded corners to site buttons and bolder text*/
.button, .submit,.search-submit {border-radius: 5px;font-weight:600;}

/*add colour to custom buttons*/
.button.custom, .button.custom:visited {color:#FFF;}
.button.custom:hover, .button.custom:active {color:#FFF;}

/*adjust margin under widget title*/
.widget-title {margin-bottom:10px;}

/*correct gap under meta tag when set to image under main title*/
.entry-meta {margin-bottom: 1.5em;}

/*adjust width of dropdown sub menu items*/
.main-navigation ul ul {width: 140px; font-size:10px;}

/*fix alignment of masonry load more button*/
.masonry-enabled .masonry-load-more {margin-left: 40px;}
@media (max-width:480px) {.masonry-enabled .masonry-load-more {margin-left: 10px;}}

/*removing left and right padding from inside grid container layout used in Start Here and Welcome pages*/
.grid-container {padding-left:0px; padding-right:0px;}

/*removing left and right padding from grid container more pages footer widget*/
#textwidget .grid-50, .tablet-grid-50, .mobile-grid-100 {padding-left:0px; padding-right:0px;}

/*adjust padding on left and right sides of footer widgets*/
.inside-footer-widgets .inner-padding {padding: 0 20px;}

/*adjust offset to its free image (class freeimage added to html of image)*/
.freeimage {
    right: -290px; /* this must be TWICE the required offset distance*/
    padding-left: 290px; /* must be the same amount as above */}

/*adjust padding left and right for whole site when view in TABLET screen*/
@media screen and (max-width: 768px) {
	                .separate-containers .inside-article, .separate-containers .comments-area, 
					.separate-containers .page-header, .separate-containers .paging-navigation, 
					.one-container .site-content, .separate-containers .widget.inner-padding {
		padding-left: 30px;
		padding-right: 30px;} .separate-containers .site.footer-widgets {padding-left: 0px; padding-right:0px;}}

/*adjust offset and sizing of its free image when viewed in MOBILE small screen*/
@media (max-width:480px) {.freeimage {margin-left:-40%; width:35%;height:35%;}}

/*adjust padding left and right for whole site when view in mobile small screen*/
@media screen and (max-width: 480px) {
	                .separate-containers .inside-article, .separate-containers .comments-area, 
					.separate-containers .page-header, .separate-containers .paging-navigation, 
					.one-container .site-content, .separate-containers .widget.inner-padding {
		padding-left: 10px;
		padding-right: 10px;} .separate-containers .site.footer-widgets {padding-left: 0px; padding-right:0px;}}

/*END GP*/

/*START CONTACT FORM*/

/*contact form adjust return position after submit (if not using redirect to other welcome page)*/
/*applys to form not filled in correct message location return as well*/
/*#fscf_redirect2, #fscf_redirect3{padding-top: 150px; margin-top: -110px; display:block; }*/
#fscf_form_error2,#fscf_form_error3 {padding-top: 110px; margin-top: -110px; display:block; }

/*contact form remove border around table created for two column form*/
/*NOTE that there is also code added to html boxes in plugin form settins (see his help page)*/
#content table, #content tr td {border:none;}

/*END CONTACT FORM*/

/*START SUPER SOCIALISER*/
/*remove arrow from floating share bar in super socializer*/
.theChampSharingArrow{display:none!important}

/*adds space above share button below submit button in forums*/
#bbpress-forums .the_champ_sharing_container  {margin-top: 20px;}
/*END SUPER SOCIALIZER*/

[Tom]

Can you link me to the site so I can see what the issue is exactly?

[Max]

Hey Tom

What is your email address? I will send you a link.

Kind Regards

[Max]

Can I send to support@generatepress.com ?

[Tom]

Yea 🙂

[Max]

Tom

I have done some more investigation. Using some locally hosted sites. The bug is not coming from your latest theme update (1.3.44).

It is coming from the GP premium update (1.2.93).

[Tom]

Haven’t received an email from you?

It’s most likely something in your custom CSS, just need to see to make sure.

[Tom]

Just added your custom CSS to my dev site.

Since you’re adjusted the padding/margin of the majority of the theme using CSS, you’ll need to add this as well:

@media (max-width:768px) {
    .site-footer .footer-widgets-container .inside-footer-widgets {
        margin-left: 0;
    }
}

[Author]

Posts