Column Classes Mobile View Spacing Errors

[BlakeN]

I'm using the altitude pro theme and the problem how column classes are rendering on mobile.

In this particular situation the footer is the source of the problem. I'm using <div class="one-fourth"> and it is rendering correctly on desktop but is terribly scrunched on mobile.

I've tried a few different things such as adding <br> (renders correctly in mobile but then desktop is strange) but can't get the spacing correct on both.

Please take a look at the footer on a cell phone and you will see what I'm referring to.

Any help is greatly appreciated!

https://hubtap.com

[Terry]

Looks like you got this footer media query taken care of, that's excellent!

Please mark this thread as resolved if you're all set.

[BlakeN]

No it hasn't been changed since I posted.

I still need help resolving.

[Terry]

It looks fine in browsers on my MacBookPro. Possibly clear your cache and open in a new page?

Let us know if that takes care of it.

[BlakeN]

The main problem is not with the desktop site. It's with the spacing on the mobile site.

"Please take a look at the footer on a cell phone and you will see what I'm referring to."

[Terry]

Used responsive views but also checked the phone and each of your footer widgets is 100% width on my iPhone.

...and iPad 25% in landscape, 100% in portrait

Think that's what you're looking for?

[BlakeN]

The problem is not the width but rather the spacing from one column to the next.

Since they're stacked in the mobile view the last line of the previous column and the first line of the following column are stacked right on top of each other without any spacing so it's extremely difficult to differentiate the text.

Ex) "Tampa, FL 33607" is sitting right on top of "About Us"

I tried using 4 custom HTML widgets but then the desktop version has them stacked vertically.

[Terry]

OK, thank you for the clarification. I had scrunched to be next to each other.

Sure that's a css property. Because your css is minified, I can't guide you on the approx line.

You can inspect and change that margin or margin-top/margin-bottom value to your liking.

[BlakeN]

Okay I've removed the CSS minification and inspected the code but am still unsure of where to add the margin top/bottom value.

[Terry]

Good busy day, sorry for the delay.

the short answer is on or around line 2014 of your style css (at the bottom of the max-width: 1280px media query) add:

.footer-widgets .one-fourth h3 {
	margin-top: 40px;
}
.footer-widgets .first h3 {
	margin-top: 0px;
}

or on or around line 97 of your functions.php change it to 4 footer widgets from 1 and the theme will take care of the spacing. Sorry, I didn't notice that you had put it all in one widget area earlier.

Let us know if that helps & mark it as resolved if you're all set.
Terry

[BlakeN]

I tried both methods.

Method one (Changing Style Sheet) resulted in strange footer spacing on the desktop version.

Method two (Changing Function.php) resulted in the the four blocks stacked vertically rather than lining up at the bottom.

[Terry]

Method One - Place the above css at the bottom of the media query
'@media only screen and (max-width: 1023px) {'

Victor has a tutorial on using your browser inspector that may help.

Be sure to remove the above css from your customization area at the bottom of your style.css.

[BlakeN]

I read through the tutorial on the inspect tool and followed the instructions from your most recent reply but the desktop version is still spaced strangely.

Sorry to be a burden. Here is what it looks like:

@media only screen and (max-width: 1200px) {
	.site-inner,
	.wrap {
		max-width: 960px;
	}
	.site-header .widget-area {
		width: 580px;
	}
	.content {
		width: 520px;
	}
	.full-width-content .content {
		padding: 0 110px;
	}
	.genesis-nav-menu a {
		padding: 30px 10px;
	}
	.site-header.dark .genesis-nav-menu a {
		padding: 20px 10px;
	}
	.front-page-1,
	.front-page-3,
	.front-page-5,
	.front-page-7 {
		background-attachment: scroll;
	}
}

@media only screen and (max-width: 1023px) {
	.site-inner,
	.wrap {
		max-width: 768px;
	}
	.secondary-nav .site-inner {
		margin-top: 80px;
	}
	.front-page .site-inner {
		max-width: none;
	}
	.site-header {
		position: static;
	}
	.front-page .site-header {
		background-color: #000;
	}
	.front-page .site-header > .wrap {
		border: none;
	}
	.content,
	.sidebar,
	.site-header .widget-area,
	.title-area {
		width: 100%;
	}
	.site-header .title-area,
	.site-header.dark .title-area {
		padding: 15px 0;
	}
	.header-image .dark .site-title > a {
		height: 76px;
	}
	.genesis-nav-menu,
	.site-header .widget-area,
	.site-title {
		text-align: center;
	}
	.header-image .site-title > a {
		background-position: center !important;
	}
	.nav-primary .genesis-nav-menu {
		float: none;
	}
	.nav-secondary,
	.site-header.dark .nav-secondary {
		border-bottom: none;
	}
	.genesis-nav-menu a,
	.site-header.dark .genesis-nav-menu a {
		padding: 10px;
	}
	.front-page .site-inner {
		margin-top: 0;
	}
	.site-inner {
		margin-top: 80px;
	}
	.full-width-content .content {
		padding: 0;
	}
	.full-width-content img.pull-left {
		margin-left: 0;
	}
	.full-width-content img.pull-right {
		margin-right: 0;
	}
	.five-sixths,
	.four-sixths,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fourths,
	.three-sixths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0;
		width: 100%;
	}
	.flexible-widgets.widget-full .widget,
	.flexible-widgets.widget-halves .widget,
	.flexible-widgets.widget-thirds .widget,
	.flexible-widgets.widget-fourths .widget {
		margin: 0 auto 20px;
		width: 100%;
	}
	.front-page-1 .widget:first-of-type h4,
	.front-page-2 .widget:first-of-type h4 {
		font-size: 60px;
	}
	.front-page-1 .image-section,
	.secondary-nav .front-page-1 .image-section {
		padding-top: 0;
	}
	.footer-widgets .one-fourth h3 {
    margin-top: 40px;
	}
	.footer-widgets .first h3 {
    margin-top: 0px;
	}
}

[BlakeN]

I read through the inspect tool tutorial and dropped the code as specified in the last reply but it's still rendering as strangely on desktop.

@media only screen and (max-width: 1200px) {
.site-inner,
.wrap {
max-width: 960px;
}
.site-header .widget-area {
width: 580px;
}
.content {
width: 520px;
}
.full-width-content .content {
padding: 0 110px;
}
.genesis-nav-menu a {
padding: 30px 10px;
}
.site-header.dark .genesis-nav-menu a {
padding: 20px 10px;
}
.front-page-1,
.front-page-3,
.front-page-5,
.front-page-7 {
background-attachment: scroll;
}
}

@media only screen and (max-width: 1023px) {
.site-inner,
.wrap {
max-width: 768px;
}
.secondary-nav .site-inner {
margin-top: 80px;
}
.front-page .site-inner {
max-width: none;
}
.site-header {
position: static;
}
.front-page .site-header {
background-color: #000;
}
.front-page .site-header > .wrap {
border: none;
}
.content,
.sidebar,
.site-header .widget-area,
.title-area {
width: 100%;
}
.site-header .title-area,
.site-header.dark .title-area {
padding: 15px 0;
}
.header-image .dark .site-title > a {
height: 76px;
}
.genesis-nav-menu,
.site-header .widget-area,
.site-title {
text-align: center;
}
.header-image .site-title > a {
background-position: center !important;
}
.nav-primary .genesis-nav-menu {
float: none;
}
.nav-secondary,
.site-header.dark .nav-secondary {
border-bottom: none;
}
.genesis-nav-menu a,
.site-header.dark .genesis-nav-menu a {
padding: 10px;
}
.front-page .site-inner {
margin-top: 0;
}
.site-inner {
margin-top: 80px;
}
.full-width-content .content {
padding: 0;
}
.full-width-content img.pull-left {
margin-left: 0;
}
.full-width-content img.pull-right {
margin-right: 0;
}
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}
.flexible-widgets.widget-full .widget,
.flexible-widgets.widget-halves .widget,
.flexible-widgets.widget-thirds .widget,
.flexible-widgets.widget-fourths .widget {
margin: 0 auto 20px;
width: 100%;
}
.front-page-1 .widget:first-of-type h4,
.front-page-2 .widget:first-of-type h4 {
font-size: 60px;
}
.front-page-1 .image-section,
.secondary-nav .front-page-1 .image-section {
padding-top: 0;
}
.footer-widgets .one-fourth h3 {
margin-top: 40px;
}
.footer-widgets .first h3 {
margin-top: 0px;
}
}

[Terry]

Are you cleaning your browser cache and opening a new browser window?

Right now, I can see that you've added the following to the very end of your style.css (and that's the only place you have these two css rule sets defined)...

.footer-widgets .one-fourth h3 {
    margin-top: 40px
}

.footer-widgets .first h3 {
    margin-top: 0
}

Because this isn't inside a media query (and is different from what you've shared above), yes that left-most area is higher (has 0 margin) on any screen > 1023px.

We need to get those two css rule sets into the right media query so they work when the screen size is less than or equal to 1023px. So if you replace that with the following based on what I can see, that leaves your desktop as is and adds the spacing you want on your stacked footer...

@media only screen and (max-width:1023px) {

.footer-widgets .one-fourth h3 {
    margin-top: 40px
}

.footer-widgets .first h3 {
    margin-top: 0
}
}

There are many ways to do this in css, this is one. If you remove the second rule set ( .footer-widgets .first h3), it adds that 40px margin to all h3s if that's what you prefer ( a larger margin on the top).

By changing the values using your browser inspector, those changes are temporary - to try before you buy so to speak. They must be made in your code to be permanent.

[BlakeN]

Sorry to be a burden but I followed your directions from the prior reply and inserted at the bottom of 1023px section. I'm not sure why it's still rendering the way it is.

I even tried dropping it at the top of the section with the same results.

@media only screen and (max-width: 1023px) {
.site-inner,
.footer-widgets .one-fourth h3 {
margin-top: 40px;
}
.footer-widgets .first h3 {
margin-top: 0px;
}
.wrap {
max-width: 768px;
}
.secondary-nav .site-inner {
margin-top: 80px;
}
.front-page .site-inner {
max-width: none;
}
.site-header {
position: static;
}
.front-page .site-header {
background-color: #000;
}
.front-page .site-header > .wrap {
border: none;
}
.content,
.sidebar,
.site-header .widget-area,
.title-area {
width: 100%;
}
.site-header .title-area,
.site-header.dark .title-area {
padding: 15px 0;
}
.header-image .dark .site-title > a {
height: 76px;
}
.genesis-nav-menu,
.site-header .widget-area,
.site-title {
text-align: center;
}
.header-image .site-title > a {
background-position: center !important;
}
.nav-primary .genesis-nav-menu {
float: none;
}
.nav-secondary,
.site-header.dark .nav-secondary {
border-bottom: none;
}
.genesis-nav-menu a,
.site-header.dark .genesis-nav-menu a {
padding: 10px;
}
.front-page .site-inner {
margin-top: 0;
}
.site-inner {
margin-top: 80px;
}
.full-width-content .content {
padding: 0;
}
.full-width-content img.pull-left {
margin-left: 0;
}
.full-width-content img.pull-right {
margin-right: 0;
}
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}
.flexible-widgets.widget-full .widget,
.flexible-widgets.widget-halves .widget,
.flexible-widgets.widget-thirds .widget,
.flexible-widgets.widget-fourths .widget {
margin: 0 auto 20px;
width: 100%;
}
.front-page-1 .widget:first-of-type h4,
.front-page-2 .widget:first-of-type h4 {
font-size: 60px;
}
.front-page-1 .image-section,
.secondary-nav .front-page-1 .image-section {
padding-top: 0;
}
}

@media only screen and (max-width: 800px)

[Terry]

Oh boy, you must be so frustrated, that is crazy.

Here's a good test...
1. Remove the css from your style.css
2. Add the following via the Customizer (Customize=> Additional CSS)

@media only screen and (max-width:1023px) {
  .footer-widgets .one-fourth h3 {
    margin-top: 40px
  }
}

Let me know how you make out... (fingers crossed emoji)

[BlakeN]

That worked!!!

Thanks so much again. That was driving me crazy.

[Terry]

Whoo Hoo!

Best wishes & please mark this thread as resolved.

[Author]

Posts