Problem with menu author archive page

This topic has 13 replies, 3 voices, and was last updated 2 years, 11 months ago by David.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts

May 12, 2021 at 7:12 pm #1776660

Tan

My menu author archive don’t show full-width. How could I fix this?
Problem is here: https://share.getcloudapp.com/6qu8lgz2

May 12, 2021 at 8:00 pm #1776684

Elvin

Staff

Customer Support

Hi there,

A plugin seems to be setting a width on the <body> tag.

Can you try disabling ALL plugins except GP Premium to check for any plugin conflict?

Let us know.

May 12, 2021 at 8:47 pm #1776708

Tan

I have found. It’s because of the simple CSS plugin.
But I can’t figure out exactly which line of code is causing the problem. This is my CSS code:

.site-logo img {
    width: 250px;
    height: 41px;
}

strong {
    font-weight: 700;
}

figcaption {
    font-size: 15px;
    text-align: center;
    font-style: italic;
}

@media (min-width:769px) {
body:not(.single):not(.page) .inside-article,
body:not(.single):not(.page) .sidebar {
    border: 1px solid rgba(232, 234, 237, 1);
    box-shadow: 0 0 10px rgba(200,200,200, 0.5);
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
}

h2.widget-title {
    margin: -20px -15px 15px -15px;
    padding: 15px;
    background-color: #f3f3f3;
	  border-top: 1px solid #e0dddd;
    border-bottom: 1px solid #e0dddd;
	  text-transform: capitalize;
	  font-size: 18px;
}

@media (max-width: 768px) {
.entry-meta {
    font-size: 75%;
    margin-top:  1.2em;
    margin-bottom: 1.1em;
    line-height: 1.5em;
}
}

.post-image-above-header .inside-article div.featured-image, .post-image-above-header .inside-article div.post-image {
    margin-top: -20px;
    margin-left: -40px;
margin-right: -40px;
}

body:not(.single) .sidebar {
    margin-top: 50px;
}

body:not(.blog) .sidebar {
    margin-top: 10px;
}

.separate-containers .site-main {
    margin-top: 10px;
}

.posted-on {
	border-left: 1px solid #ddd;
	padding-left: 10px;
	margin-left: 10px;
}

footer.entry-meta{
	display: none;
}

.hero-category a, .post-nav, .entry-meta .cat-links a {
    background-color: #f15025;
    color: #ffffff !important;
    margin-left: 10px;
}

body:not(.single) .entry-meta {
    font-size: 70%;
    margin-bottom: 1.5em;
    margin-left: -40px;
    margin-right: -40px;
    margin-top: 25px;
    padding-top: 10px;
    padding-bottom:10px;
    padding-left: 40px;
    background-color: #f3f3f3;
    border-top: 1px solid #e0dddd;
    border-bottom: 1px solid #e0dddd;
} 

.menu-learn-more-container {
padding-bottom: 10px;
width: 45%;
margin: 0 auto;
text-align: center;
border-bottom: 1px solid #e0dddd;
}

.page-hero h1 {
margin-top: 20px;
margin-bottom: 25px;
}

.author vcard img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 0 0;
}

.author, .page-hero-gravatar {
    display: inline-block;
}

.single .entry-date {
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
    padding-left: 14px;
    padding-right: 14px;
    margin-left: 10px;
    margin-right: 10px;
}

.page-hero-content {
margin-top: 20px;
}

.comments-area,
.author-box {
    max-width: 800px; /* Adjust to suit */
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 769px) {
    .comment-form #author, 
    .comment-form #email {
        width: 48%;
        float: left;
    }

    .comment-form #email {
        float: right;
    }

    .comment-form #url {
        width: 100%;
    }
}

.message-below-content {
font-size: 14px;
margin-bottom: 20px;
}

.comment-reply-title {
color: #f15025;
}

body:not(.page) .king img {
border: none !important;
box-shadow: none !important;
}

body:not(.page) .wp-block-image img{
    border: 1px solid #d4d4d4;
    box-shadow: 10px 10px 0px #d4d4d4;
    margin-bottom: 30px;
}

.generate-back-to-top,
.generate-back-to-top:visited {
    bottom: 80px;
}

.inside-article p a:link,
.inside-article p a:hover,
.inside-article p a:active,
.inside-article p a:visited {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .main-navigation button.menu-toggle {
        display: block !important;
    }
}

/* nav links effect */
@media (min-width:769px) {
    .main-navigation .menu > .menu-item:not(.nav-button) > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 0px !important;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
        width: 0;
        height: 4px;
        background-color: currentColor;
        transition: 0.3s width ease;
     }
     .main-navigation .menu > .menu-item:not(.nav-button).current-menu-item > a::after,
     .main-navigation .menu > .menu-item:not(.nav-button) > a:hover::after {
        width: 70%;
     }
}

@media (min-width:768px) {
    .main-navigation .main-nav ul li.nav-button a {
        background-color: #f15025;
        color: #ffffff;
        line-height: 45px;
			margin-top: 12px;
			border-radius: 3px;
    }
}

@media (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a:hover {
        background-color: #c6401c;
        color: #ffffff;
    }
    .main-navigation .main-nav ul li.nav-button a:active {
        background-color: #ffffff;
		
    }
}

.ava-author-box img{
border-radius: 100%;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,.20);
}

.entry-content ul li,
.entry-content ol li {
    margin-bottom: 15px;
}

.entry-content a:not(.read-more):not(.button):not(.gb-button):hover {
    text-decoration: underline;
}

ol.pk-toc {
    list-style: none;
    counter-reset: custom-counter;
    margin-left: 1.5em;
}

ol.pk-toc li {
    counter-increment: custom-counter;
    line-height: 1.5em;
    font-size: 16px;
}

ol.pk-toc li::before {
    display: inline-block;
    content: counter(custom-counter);
    font-weight: 600;
    border-radius: 50%;
    margin-right: 20px;
  width: 28px;
    height: 28px;
    text-align: center;
    color: #495057; /* Counter text color */
    background-color: #ced4da; /* Counter background color */
}

.shared-counts-wrap.shortcode.style-fancy .shared-counts-button:not(.included_total) {
  background-color: #f15025 !important;
}

.shared-counts-wrap.shortcode.style-fancy .shared-counts-button:not(.included_total):hover {
  background-color: #c44126 !important;
}

.shared-counts-wrap.shortcode.style-buttons {
    display: flex;
justify-content: center;
    margin-top: 30px;
}

.shared-counts-wrap.shortcode.style-buttons .shared-counts-button included_total {
color:  #999999;
}

.shared-counts-wrap.shortcode.style-buttons .shared-counts-button:not(.included_total) {
  background-color: #f15025 !important;
border-radius: 4px !important;
}

.shared-counts-wrap.shortcode.style-buttons .shared-counts-button:not(.included_total):hover {
  background-color: #c44126 !important;
}

.shared-counts-wrap.shortcode.style-buttons .shared-counts-label {
font-size: 17px;
margin-top: 2px;
margin-left: 3px;
}

.comment-form-cookies-consent {
    font-size:15px;
}

.skin {
 margin-bottom: 30px;
}

.rank-math-block {
background:  #f5f5f5;
background-color:  #f5f5f5;
border-radius: 5px;
box-sizing: border-box;
color:  #2a2b2a;
font-size: 18px;
line-height: 1.4em;
margin-bottom: 1rem;
padding: 15px;
}

.rank-math-list-item {
background:  #ffffff;
background-color:  #ffffff;
border-radius: 5px;
box-shadow:  #d1d8dd 0px 0px 10px,  #ffffff 0px 0px 40px;
box-sizing: border-box;
color:  #2a2b2a;
font-size: 18px;
line-height: 1.4em;
margin-bottom: 1rem;
padding: 15px 15px 20px;
}

.rank-math-question { 
	bottom: 0px;
	box-sizing: border-box;
	clear: both;
	color: #f15025;
	font-size: 1.4rem;
	font-weight: 700;
	left: 0px;
	line-height: 33.6px;
	margin-bottom: 0.825rem;
	margin-top: 0px;
	padding-bottom: 0.825rem;
	padding-right: 40px;
	padding-top: 0px;
	position: relative;
	right: 0px;
	top: 0px;
        border-bottom: 1px solid #F0F4F8;
}

.rank-math-question::after { 
	background: #f5f5f5;
	border-radius: 40px;
	color: #d9e2ec;
	content: "?";
	line-height: 30px;
	position: absolute;
	right: 0px;
	text-align: center;
	top: 0px;
	width: 30px;
}
@media (prefers-reduced-motion: reduce) { 
	.rank-math-question { 
		animation-duration: 0s !important;
		transition-duration: 0s !important;
	}
}

body:not(.single) .wp-block-image figcaption {
  display: none !important;
}

blockquote {
margin-left: 30px;  
border-left: 5px solid #f15025 ;
}

blockquote p{
  margin-bottom: 0.7em;
}

blockquote cite{
  font-size: 16px;
  color: #333333;
  margin-top: 1em;
}

Can you help me?

May 12, 2021 at 11:08 pm #1776793

Elvin

Staff

Customer Support

Can you try removing this?

.author, .page-hero-gravatar {
    display: inline-block;
}

May 13, 2021 at 1:30 am #1776931

Tan

Yes It worked. Thank you so much, Elvin!
I also want 2 adjustments with 2 gravatars author on this page.
Increase size of this one: https://share.getcloudapp.com/Jru4RdnW
Decrease size of this one: https://share.getcloudapp.com/Blu4wrdp
I try this code but it doesn’t work :(:

.entry-meta .avatar avatar-96 photo {
    width: 35px !important;
    height: 35px !important;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 0 0;
}

Can you help me?

May 13, 2021 at 3:18 am #1777074

David

Staff

Customer Support

Hi there,

try this:

/* archive title avatar */
.author .page-header .avatar {
    width: 90px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 0 0;
}

/* entry meta avatar */
.entry-meta .author img {
    width: 35px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 0 0;
}

May 13, 2021 at 3:35 am #1777087

Tan

Thank you David. I got it 😀
But the author avatar is very blurry. Is there a way to make it more detailed?

May 13, 2021 at 6:47 am #1777345

David

Staff

Customer Support

Leo provides a PHP Snippet for that here:

https://generatepress.com/forums/topic/change-avatar-size-on-author-page/#post-1540351

In that code you will see this line:

get_avatar( get_the_author_meta( 'ID' ), 100 ),

the 100 is the size in px, the default is 50 change that value to the size you require.

May 13, 2021 at 7:05 am #1777623

Tan

Thank you so much, David. You’re amazing!
The last thing, I want to align center page author name, author avatar, author description and page navigation. What should I do?

May 13, 2021 at 7:18 am #1777660

David

Staff

Customer Support

The author avatar – should that be above the author title ? Or to the left of it ( as it is now ).

May 13, 2021 at 7:21 am #1777668

Tan

Above is the best option 🙂

May 13, 2021 at 7:49 am #1777731

David

Staff

Customer Support

This CSS:

.nav-links,
.author .page-header {
    text-align: center;
}

.author .page-header .page-title {
    display: flex;
    align-items: center;
}
.author .page-header .page-title {
    flex-direction: column;
}
.author .page-header .page-title img {
    margin-right: 0;
}

And optional to make the Author header contained like the content:

.author .page-header {
    max-width: 800px;
    margin: auto
}

May 13, 2021 at 3:22 pm #1778807

Tan

Thank you, David. You’re amazing! 🙂

May 14, 2021 at 12:20 am #1779404

David

Staff

Customer Support

Glad to be of help

Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

[Resolved] Problem with menu author archive page

Popular Articles

Start building better websites today.