michaelb428ping

We have now purchased and activated the Pro version.

I looked at the documentation page noted, but I’m not entirely clear where the [auto_id] shortcode should go.

On the Build page for a form, does this go into the field options for any specific field or all fields? And for that field, does it go into the “Default Value” field setting under Advanced?

Thank you.

I see, it’s only fixable in the Pro version.

Thank you.

Thank you for the update! I look forward to using it in the next version.

Thank you for adding this on the to-do list. It’s much appreciated!

Hello Leo,

That fixed the menu!

Thank you for your help, it’s much appreciated.

Michael

Oops, I left out the “logo position fix” css for desktop width. Here it is again:

.site-logo {
	display: inline-block !important;
}

.home .entry-header {
	/* hide H1 on home */
	display: none;
}

/* for myStickymenu plugin */
.home #mysticky-nav .site-header {
	z-index: 10;
}

@media screen and (min-width: 801px) {
/* desktop width */

	/* logo position fix */
		.site-header .inside-header {
			flex-direction: row;
		}

	.socialLinks {
		width: 100%;
		display: flex !important;
		flex-direction: column;
		flex-wrap: wrap;
		float: right !important;
		text-align: right !important;
	}

}

@media screen and (min-width: 768px) and (max-width: 800px)  {
/* tablet width */
	
	/* logo position fix */
		.site-header .inside-header {
			flex-direction: row;
		}
	
	.socialLinks {
		width: 100%;
		display: flex !important;
		flex-direction: column;
		flex-wrap: wrap;
		float: right !important;
		text-align: right !important;
	}
	
}

Thank you.

Hello Fernando,

That worked, thank you!

However as a result of doing that, the navigation menu moved to the left a little. How can I get the navigation menu back to be aligned/floated right again?

https://a3q.179.myftpupload.com/

I’m using the following custom CSS for desktop/tablet responsive width:

.site-logo {
	display: inline-block !important;
}

.home .entry-header {
	/* hide H1 on home */
	display: none;
}

/* for myStickymenu plugin */
.home #mysticky-nav .site-header {
	z-index: 10;
}

@media screen and (min-width: 801px) {
/* desktop width */

	.socialLinks {
		width: 100%;
		display: flex !important;
		flex-direction: column;
		flex-wrap: wrap;
		float: right !important;
		text-align: right !important;
	}

}

@media screen and (min-width: 768px) and (max-width: 800px)  {
/* tablet width */
	
	/* logo position fix */
		.site-header .inside-header {
			flex-direction: row;
		}
	
	.socialLinks {
		width: 100%;
		display: flex !important;
		flex-direction: column;
		flex-wrap: wrap;
		float: right !important;
		text-align: right !important;
	}
	
}

Thank you.

Yes, that worked — thank you so much! ??

For those reading this, I restored the three footer columns in side-by-side arrangement for tablet width with this custom CSS:

@media screen and (min-width: 768px) and (max-width: 800px)  {
/* tablet width */

	/* restyle footer columns */
	.inside-footer-widgets {
		display: block !important;
		flex-wrap: wrap;
	}
	
	.inside-footer-widgets .footer-widget-1, .inside-footer-widgets .footer-widget-2, .inside-footer-widgets .footer-widget-3 {
		width: 30%;
		clear: none;
	}

	.inside-footer-widgets .footer-widget-1 {
		margin-bottom: 0 !important;
	}
	
	.inside-footer-widgets .footer-widget-2 {
		text-align: center !important;
		margin-top: -26px;
		margin-left: 30%;
		margin-right: 30%;
		margin-bottom: 0 !important;
	}
	
	.inside-footer-widgets .footer-widget-3 {
		margin-top: -25px;
		float: right !important;
	}
		
}

I set up a test environment here to look at:
https://a3q.179.myftpupload.com

You may need to resize your Web browser window precisely at 768px wide, but when you do (portrait orientation) the screen looks like this with the logo centered:
https://a3q.179.myftpupload.com/wp-content/uploads/tablet-width-screenshot.jpg

I would like for the logo to be aligned left in portrait orientation tablet width (min-width: 768px and max-width: 800px,) just like it is in desktop width (min-width: 801px.) What custom CSS should I use in my tablet width media query?

Thank you.

I was testing GeneratePress in MAMP — which sets up a local server environment — so that’s not reachable from the outside.

I will see if I can set something up on a more public server in the next few days.

If you need to log in, please let me know how I can send you a private message with the login information — there doesn’t seem to be a way to do that here on www.ads-software.com.

Thank you.

OK, so that needs to be done with CSS.

I now have media queries set up with width ranges, and the footer in tablet width behaving in columns again. However, I can’t seem to get the header logo to float left and the nav menu to float right — even with !important overrides.

What CSS should I use to have the logo on the left and nav menu on the right so it appears as it does in desktop width?

Thank you.

Oh, that’s one I haven’t tried yet. Thank you!

That works… sort of. For “generate_not_mobile_menu_media_query” I had to add this in after the min-width value assignment line in order to have a tablet width range (instead of the wanted appearance at a single tablet width value):
return ‘(max-width: 800px)’;

The menu now shows in tablet width, thank you! I usually have my tablet width separate so I can make CSS adjustments for that width only. I also have different CSS adjustments for desktop width, which are separate from tablet width.

But there are two odd things now — basically, I’m trying to make the tablet width responsive behavior act and appear like it does in desktop width.

1) Strangely, the logo is now centered (and centered only at 768px window width) instead of aligned left like it appears in desktop width. Is there a filter I can add to make the logo appear aligned left in my tablet width range (768px to 800px)?

2) Also, I have three columns in the footer, which now wrap (stack one atop each other) like in mobile width instead of appear side-by-side like they do in desktop width. Is there a filter I can add to make the footer columns appear side-by-side like they do in desktop width?

For the record, I now have this in my child theme’s functions.php file:

add_filter( 'generate_mobile_menu_media_query', function() {
	return '(max-width: 766px)';
} );

add_filter( 'generate_not_mobile_menu_media_query', function() {
	return '(min-width: 768px)';
	return '(max-width: 800px)';
} );

We’re almost there…

Thank you for your help!

The plugin I used to install an older version — available in the WordPress Plugins directory — is called “WP Rollback.”

Once installed in your version of WordPress, bring up its Plugins page, find the plugin in question, click its rollback link, then select the version to swap in and use.

It’s quite handy for recovering from bugs in updated plugins.

Also make sure the WordPress auto-update feature is disabled for the plugin in question, or else you’ll be back where you started (with the plugin’s latest version and its issues.)

Hello Nikita,

Yes, that fixed the distortion issue!

It seems that CSS was in there to compensate for the client wanting to have a large caption (226 characters) which made the image smaller to accomodate that.

It’s strange that Safari didn’t scale the image proportionally when that bottom padding was added (while Chrome and Firefox did scale the image proportionally.)

Thank you for your help!

I will also mention this is a one-page Website. The all the top navigation links are anchors to areas on different locations of the same page.

Thank you.