Forum Replies Created
-
AuthorPosts
-
July 29, 2020 at 6:37 pm in reply to: How to Hide Site Title and shift Header Menu to the left #500369askdesignParticipant
If you provide the URL, we could provide better answers.
For now, I would suggest deleting the absolute positioning, and letting the primary nav float left. Something like this:
@media (min-width: 896px) { .nav-primary { width: 100%; position: relative; float: left; } }
There's usually a widget area for the social media icons that you could use.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantYou can change the default layout of a theme from the WordPress dashboard > Genesis > Theme Settings screen. You can override the default settings on individual pages and posts.
This article is helpful:
OR
You can leave the default layout as is and modify the style sheet (style.css). Make a copy of the file before making any changes!
ORIGINAL CODE
.page .entry-header, .single .entry-header { margin: 0 auto 5%; max-width: 660px; } .page .entry-content, .single .entry-content { margin-left: auto; margin-right: auto; max-width: 660px; }
MODIFIED CODE
.page .entry-header, .single .entry-header { margin: 0 auto 5%; max-width: 1280px; } .page .entry-content, .single .entry-content { margin-left: auto; margin-right: auto; max-width: 1280px; }
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantI recommend leaving at least a little bit of padding on smaller devices. Right now, the overall wrap padding for the site is 20px on left and right sides. Leave that code as is, and just add a reduced padding to your media query.
ORIGINAL CODE
.wrap { background-color: #fff !important; padding: 0 20px; }
MODIFIED CODE
@media only screen and (max-width: 860px) { .wrap { padding: 0 10px; } }
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantThe URL link is broken. Please provide a new one so that someone can help you.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantThe URL you provide doesn't work. You can change the default layout of a theme from the WordPress dashboard > Genesis > Theme Settings screen. You can override the default settings on individual pages and posts.
This article is helpful:
https://clickwp.com/p/genesis-layout-settings/Also, the home page layout depends on your theme. Often, there are home page (or "front page") widgets. You could also use Gutenberg blocks for layout.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantIf you are unable to do this with Meta Slider, try the Smart Slider 3 plugin. There are other plugins that can do this, but I'm familiar with Smart Slider 3.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantYou'll need to add some media queries (mobile-responsive code).
ORIGINAL CODE
@media only screen and (max-width: 800px) { .front-page-1 { height: auto; } @media only screen and (max-width: 800px) .front-page-1, .front-page-2, .front-page-3, .front-page-4, .front-page-5, .front-page-6, .front-page-7 { padding-bottom: 150px; padding-top: 150px; } }
MODIFIED CODE
@media only screen and (max-width: 800px) { .front-page-1, .front-page-3, .front-page-5 { padding-bottom: 150px; padding-top: 150px; background-size: contain; } }
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantThe URL is no longer available.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantHi Michael, It looks like you found the solution. If so, please mark this as "RESOLVED". Thanks!
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantPlease provide the URL for the site which has the header you want to emulate on your own site.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantThe hero images look good. Have you solved this question? If so, please mark "RESOLVED".
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantWelcome. Nice looking site!
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantLooks like you've found a solution. Congrats! You can mark this topic as CLOSED.
Anne S. Katzeff
Designer | Artist | TeacherJuly 4, 2020 at 9:13 am in reply to: How do I align the images top of the content in mobile version? #499938askdesignParticipantPlease provide the URL of your website so that someone can help you. On the Authority Pro demo page, there are no images in the content/sidebar layout (only in the sidebar).
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantMedia queries are mobile-responsive code.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantSorry about that. We're all volunteers trying our best to keep up with the support questions.
Anne S. Katzeff
Designer | Artist | TeacherJuly 3, 2020 at 6:56 pm in reply to: change logo position and add advertise space before the header #499906askdesignParticipantIt looks like you've found solutions for moving the logo to the left and placing the 3 category links in the center.
To reduce the widget size:
.site-header .search-form { float: right; margin-top: 14px; padding-right: 3px; /* --- was 7px --- */ padding-left: 3px; /* --- was 10px --- */ } #search-8 input { background-color: #fff; border: 1px solid #ddd; color: #222; font-family: raleway,sans-serif; font-size: 14px; font-size: 1.4rem; font-weight: 300; padding: 8px; /* --- all other input elements have 16px --- */ width: 100%; }
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantWelcome to Genesis, Danielle. Looks like you're well on your way to learning new things! Have fun!
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantIt looks like your header is sized with an inline-style, via theme settings. I'm not familiar with the Smart Passive Income theme. Hopefully, you can find it in the theme settings or in the Customizer area.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantThanks for fixing the URL link.
Yes, you can change the size of the desktop version of the logo and keep the mobile size intact.First, change the desktop size, like this:
ORIGINAL CODE
.wp-custom-logo .title-area img { width: 100%; }
MODIFIED CODE
.wp-custom-logo .title-area img { width: 90%; }
Second, with media queries, revert back to the ORIGINAL CODE. Add the media queries to the bottom of your stylesheet (style.css):
@media screen and (max-width: 360px) { .wp-custom-logo .title-area img { width: 100%; }
Anne S. Katzeff
Designer | Artist | Teacher -
AuthorPosts