Community Forums › Forums › Archived Forums › General Discussion › Showcase Pro: How to reduce line spacing on a landing page
- This topic has 3 replies, 2 voices, and was last updated 4 years, 11 months ago by XWrecon.
-
AuthorPosts
-
May 23, 2019 at 1:04 pm #491320XWreconParticipant
THEME: Showcase Pro
I have a landing page (using Template "landing") that the line spacing between the paragraphs and other content is too large.
When I look at it in the editor (Classic Editor) the line spacing is much closer together.
Is there a way to reduce the height between the different sections?
Not sure why the editor would show the line spacing different that the actual live page?
https://www.midwesthr.com/midwesthr_benefitsMay 24, 2019 at 5:20 am #491327Victor FontModeratorKeep in mind that the front end of the site and the editor use different style sheets. There will always be a difference, especially when you start working with Gutenberg. It's a pain, but if you want everything to be an exact match, you have to modify the editor style sheets, which is a much easier process with Gutenberg.
Use your browser's built-in inspection tool to find the CSS that controls the front end line height. Then, edit it in style.css.
https://victorfont.com/how-to-use-your-browsers-inspect-tool/
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?May 24, 2019 at 7:37 am #491331XWreconParticipantVictor,
Thanks for the reply! Not doing anything with Gutenberg yet but hopefully by the end of the year to try it.
Didn't know the front end and editor have different style sheets that explains some of this.
The landing page template is the only one causing problems for spacing. Is there a way to reduce the height only on the Landing page?
Not a code nerd but is this the area that controls ONLY the Landing page template?
/* Site Containers * ========================================================================== */ .showcase-landing { background: #fff; } .full-width-content .content, body.woocommerce-account .woocommerce-MyAccount-content, body.woocommerce-account .entry-content .woocommerce { margin: 0 auto; max-width: 80rem; float: none; } .wrap { margin: 0 auto; padding: 0 5%; } .site-inner { clear: both; padding: 4rem 0; overflow: hidden; background: #fff; } .front-page .site-inner { padding: 0; } .full.full-width-content .content, .woocommerce-page.full-width-content .content { max-width: 100%; width: 100%; } .title-center .entry-header .entry-title { text-align: center; } @media only screen and (min-width: 800px) { body:not(.with-page-header) .site-inner { padding-top: 18rem; } } @media only screen and (min-width: 1100px) { .content { float: right; width: 70%; } .content-sidebar .content { float: left; } .sidebar-primary { float: right; width: 25%; } .sidebar-content .sidebar-primary { float: left; } .wrap { max-width: 120rem; } .site-inner { padding: 8rem 0; } } @media only screen and (min-width: 1500px) { .wrap { max-width: 160rem; } }
From Googling around I found this, Will some variation of this change the landing page height? Any thoughts are appreciated on this.
.entry-content p { line-height: 1.2; }
May 28, 2019 at 11:02 am #491377XWreconParticipantOk so after a little research it looks like I need to adjust the padding (educated guess) so that each of the sections on the page are closer together for just the landing page. Ex. padding: 1rem;
But am not sure how to target in CSS this change for only the Landing page which is what this page is made from.
Any ideas?
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.