DPruitt

I could probably work with you one-on-one.
Feel free to invite me into your site: derek@derekpruitt.design

Try this:
 
 
Blog Title:
 
.blog-title { font-family: Helvetica Neue !important; font-size: 2rem !important; text-transform: none !important; font-weight: 500 !important; letter-spacing: 0rem !important; margin-bottom: 0.8em; margin-top: 0.8em !important; padding-bottom: 0.5rem !important; padding-top: 0.5rem !important;}  
Blog Excerpt:
.blog-excerpt p {font-size: 1rem !important;} .blog-excerpt {padding-bottom: 0.8rem !important;}  
Read More Link:
.blog-more-link { font-family: 'aktiv-grotesk-extended' !important; font-weight: 500 !important; font-size: 1rem !important; font-style: normal !important; text-transform: uppercase !important;}  

With the accordion, you can first create a text block for the first part of the visible text, then drop in the accordion block below it with "Read More" as a title, with the description containing the remaining text...
If you're trying to do it within the carousel, you would need HTML within the description, Javascript for the "read more" button along with CSS to style it visually.  I've written this for a few clients, however, you do have to add HTML to the content description which some people don't like doing.  For example <h4>Read More...</h4> would be added to the description field.

Try this:
 
 
Blog Title:
 
.blog-title { font-family: Helvetica Neue !important; font-size: 2rem !important; text-transform: none !important; font-weight: 500 !important; letter-spacing: 0rem !important; margin-bottom: 0.8em; margin-top: 0.8em !important; padding-bottom: 0.5rem !important; padding-top: 0.5rem !important;}  
Blog Excerpt:
.blog-excerpt p {font-size: 1rem !important;} .blog-excerpt {padding-bottom: 0.8rem !important;}  
Read More Link:
.blog-more-link { font-family: 'aktiv-grotesk-extended' !important; font-weight: 500 !important; font-size: 1rem !important; font-style: normal !important; text-transform: uppercase !important;}  

Hey!
For the testimonial section, you can have "read more" by using an accordion block for the drop down function of read more...

You should be able to do this under "Fonts".
You can also code it with custom CSS like this:
.newsletter-form .newsletter-form-header-title {font-size: 25px !important;}  

Try this:
 
 
Blog Title:
 
.blog-title { font-family: Helvetica Neue !important; font-size: 2rem !important; text-transform: none !important; font-weight: 500 !important; letter-spacing: 0rem !important; margin-bottom: 0.8em; margin-top: 0.8em !important; padding-bottom: 0.5rem !important; padding-top: 0.5rem !important;}  
Blog Excerpt:
.blog-excerpt p {font-size: 1rem !important;} .blog-excerpt {padding-bottom: 0.8rem !important;}  
Read More Link:
.blog-more-link { font-family: 'aktiv-grotesk-extended' !important; font-weight: 500 !important; font-size: 1rem !important; font-style: normal !important; text-transform: uppercase !important;}  

You could do this:
.header-menu-nav-folder-content {justify-content: initial !important;} .header-menu-nav-folder.header-menu-nav-folder--active { flex-direction: column-reverse !important; } Sadly, it does move the Social Icons above the navigation.
You could do this approach instead to solve that issue:
.header--menu-open .header-menu .header-menu-cta {order: 0;} .header-menu-nav-folder-content {order: 5 !important;} .header--menu-open .header-menu .header-menu-actions { order: 6 !important;}  

YW!
updated the code too...

Personally, instead of adding the mobile image above the parallax desktop image in that index page, you might add another index page specifically for mobile below the desktop index page.
 After that, hide the first index page for mobile viewing and hide the 2nd index page for desktop viewing.
 

Personally, instead of adding the mobile image above the parallax desktop image in that index page, you might add another index page specifically for mobile below the desktop index page.
 After that, hide the first index page for mobile viewing and hide the 2nd index page for desktop viewing.
 

Try inserting this into CUSTOM CSS:
.entry-content p {font-size: 20px !important; line-height: 1.6px !important;}  

@DPruittThank you so so so much!!! You have resolved my issue completely!!!

Can you check to see if that helped any?  The approach was to hide the overflow this time.

Also, you do have a project title in the top right that's in black:
.project-title
 
It also looks like you've hidden your pagination which could be some of the issues in hitting the back button and getting the error; I think using that feature would probably solve the issue.

No link?

Swweettt!
 
Feel free to mark as solution.  Code can be found around line 194:
/* align portfolio pagination */ .item-pagination[data-collection-type^="portfolio"] { max-width: 1656px; margin: 0 auto; } @media screen and (min-width: 1656px) { #collection-64da37315a0bb7306fe44e53,#collection-64d0eb024c0ac125cd63e3b8,#collection-64d20affa6742348f6ae01bd {#sections .content {padding-left: 8vw; padding-right: 8vw;} .tweak-portfolio-grid-basic-width-inset .portfolio-grid-basic {padding-left:0px!important; padding-right:0px !important} } }  

Okay check again

I removed my code and it was still doing it so this appears to be a separate issue...
Checking to see what I can find; all of my codes are for 1656px+.

Fixing a few more issues and rewriting a few codes now... one moment..

I went ahead and removed some of the code and pasted it to a notepad for now.  Can you check the site again to see if that solved your issue?  I did notice on a certain test that the header was acting funky from the custom padding css.

Probably be easier if you just invite me into the site with Admin rights:
derek@derekpruitt.design

I would say all of that code can probably be removed as it looks custom.  The inset option alone should be flushing everything accordingly.  There maybe one setting where you need to set a "max-width" not a width code.  If you tell it "width" you're telling it to be 1600px wide on all screen devices.

It looks like you need to:

1. Click to edit your footer
2. Find the code block in the footer
3. Delete the code block.

Try inserting this into Custom CSS:
 
#collection-62863a4551ee0a7a11c8656e { /*Homepage Overlay Header*/ .header-announcement-bar-wrapper {position: fixed} /*Navigation*/ .header-nav-item a {color:#ffffff !important;} /*Logo*/ .header-title-logo img {filter: brightness(0) invert(1); !important;} }  

Hey Mike!
Try this:
#collection-id #sections .page-section:nth-child(1):after {content:''; width: 100%; display:block; position: absolute; bottom:0px; height: 70px; background: #1c1c1c; background: linear-gradient(0deg, #1c1c1c 28%, rgba(28, 28, 28, 0) 100%); } You can always toggle the height if it needs to be larger...  You'll also need to toggle the #collection-id to get the code to work specifically on your homepage so that other pages are not affected...  If you want it on all pages, simply remove #collection-id.

Try adding this to the bottom of your custom css or alter any existing custom css:
.eventlist a.eventlist-button {border-width: 2px !important; border-style: solid !important; transition: 0.1s background-color linear, 0.1s color linear; font-family: brandon-grotesque !important; font-weight: 700 !important; font-style: normal !important; text-transform: uppercase !important; letter-spacing: .3em !important; background-color: transparent !important; color: #272727 !important; width: auto !important; height: auto !important; padding: 1em 2.5em !important;} .eventlist a.eventlist-button:hover {background-color: #272727 !important; color:#ffffff !important}