[Resolved] Space Between Buttons on Mobile

[Mark]

I disabled Autoptimize. I don’t see a way to disable Kinsta but I will check. My css:

/* GeneratePress Site CSS */ .inside-article,
.sidebar .widget,
.comments-area {
border: 1px solid rgba(232, 234, 237, 1);
box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}

/* Featured widget */
.sidebar .widget:first-child {
background-color: #ffffff;
color: #ffffff;
}

.sidebar .widget:first-child .widget-title,
.sidebar .widget:first-child a:not(.button) {
color: #000;
}

.sidebar .widget li {
margin-bottom: 20px;
}

.sidebar .widget_media_image, .sidebar .widget_sow-image {
padding: 0;
font-size: 0;
}

.button.light {
background: #fff;
color: #000;
}

.button.light:hover {
background: #fafafa;
color: #222;
}

.separate-containers .page-header {
background: transparent;
padding: 20px 0;
}

.mobile-bar-items .search-item {
display: none;
}

.page-header h1 {
font-size: 30px;
}

.main-navigation li a {
font-weight: bold;
}

.page-numbers {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid;
text-align: center;
}

.separate-containers .paging-navigation {
background-color: #fafafa;
}

#breadcrumbs {
font-size: 16px;
padding-bottom: 15px;
}

@media (max-width: 768px) {
.archive .page-header {
padding: 30px;
}
}

@media (min-width: 769px) {
.post-image-aligned-left .post-image img {
max-width: 300px;
}

h1.hero-heading {
font-size: 70px;
font-weight: bold;
}

@media (max-width: 768px) {
h1.hero-heading {
font-size: 40px;
}
}

.posted-on .updated {
display: inline-block;
}

.posted-on .updated + .entry-date {
display: none;
}

.posted-on .updated:before {
content: “Last updated on “;
}

@media (max-width: 768px) {
.page-hero a.button {
margin-top: 5px;
}
}

[Leo]

Looks like you are missing a closing bracket } for the @media (min-width: 769px) part in this part of CSS:
https://www.screencast.com/t/VcsWtLu1J

Can you try fixing that first?

Let me know 🙂

[Mark]

Great find. When I do that in customizer, I get this response after I click publish:

There is 1 error which must be fixed before you can save.
Update anyway, even though it might break your site?

Do you think it’s ok to move forward?

[Leo]

You can try validating your code to make sure there aren’t any errors:
https://jigsaw.w3.org/css-validator/

Every open bracket { needs a closing bracket }, make sure all the @media has a closing bracket at the right spot as well.

[Mark]

Got it. I had an extra bracket in there. I think I’m good to go. If you wouldn’t mind checking too, I’d appreciate it but it works on my end. Leo, I really appreciate you hanging with me on this one. Thanks!

[Leo]

Yup I can see the CSS applied now.

Glad I could help 🙂

[Mark]

Leo, after review, all of my font has changed and the “explore” menu button is off after you scroll. If you go to the homepage you will notice the correct font and after clicking on a post, you will see another.

All I added to the CSS was the extra } you mentioned and I removed an extra one at the bottom of the css that wasn’t necessary. Please let me know your thoughts.

[Leo]

Not quite sure if I understand.

Your CSS didn’t have any font-family included here?
https://generatepress.com/forums/topic/space-between-buttons-on-mobile/page/2/#post-957866

The Explore menu item works correctly in sticky mode as well:
https://www.screencast.com/t/m5YVwEWyj

[Mark]

I think the issue was turning autoptimize back on. I deactivated it again and it seems all good. Thanks again.

[Leo]

No problem 🙂

Make sure to see our recommended Autopmize settings here:
https://generatepress.com/fastest-wordpress-theme/

[Author]

Posts