sorca_marian

You can add the below CSS code in page header code injection of the blog
 
<style> .blog-masonry.collection-content-wrapper { padding-top : 1vw; } </style>  

Just add the below code withing the media query for desktop

 
.sqs-gallery-design-autogrid .summary-item:hover .img-wrapper:after { opacity : 0; }  

Update the last part of the code to 
.summary-read-more-link:before { content: 'Read More'; visibility: visible; position: absolute; } I noticed that you have a JavaScript error probably from a custom code.
"home:8087 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML"
It might be executed before the element is in the HTML

Something like this?

The CSS - only when the menu is open 
body:has(header[data-section-theme="bright"]) .tp-button { right : 50%; translate: 50% 0; font-size: 30px; } @media (max-width : 767px) { body:has(header[data-section-theme="bright"]) .tp-button { font-size : 16px; } }  

Hi,
 
I have a tutorial for anchor links to sections.

Make sure you are adding the right link.
For example, if the page is site.com/page and you want to link to a section there add the link /page#section
 

Something like this?
 
.course-item .course-item__side-nav-link .course-item__side-nav-thumbnail-container { background : transparent; }  

Try this CSS code
@media (max-width: 767px) { .newsletter-form-body { display : flex; justify-content : center; } .newsletter-form-button-label { display : none; } .newsletter-form-button-wrapper .newsletter-form-button-icon:before { content : "\2192"; font-size : 30px; } .newsletter-form-button-wrapper .newsletter-form-button { padding : 20px 7px 21px!important } }  

Try this code 
input[name="email"] { background : transparent!important; color : rgb(237, 191, 42); text-align : center; border : none!important; border-bottom : 1px solid rgb(237, 191, 42)!important; } input[name="email"]::placeholder { color : rgb(237, 191, 42)!important; text-align : center; text-transform : uppercase; letter-spacing:3px; }  

For the section that you have in the image, you can add the below code in the Page Header Code Injection of the homepage
 
<style> @media (max-width : 767px) { #sections > :nth-child(4) .sqs-gallery-design-grid > :last-child { display : none; } } </style>  

There is a small mistake in the code provided.

 I updated it.
<script> document.addEventListener('DOMContentLoaded', function() { document.querySelector('h1.image a').setAttribute('href', '/home'); }); </script>

Hello,

Try using /#designs
If it does not work, send me a link to your site so I can make some tests.

If you want to scroll to the next section on arrow click, use this code
<style> #sections > :first-child { position: relative; } .bottom { position: absolute; bottom: 0; width: 100%; text-align: center; } .scroll-indicator { display: inline-block; width: 24px; height: 24px; margin: 16px auto; border-right: 2px solid #FFF; border-bottom: 2px solid #FFF; border-bottom-right-radius: 2px; transform: rotate(45deg); animation: fade 2s infinite linear; } @keyframes fade { 0% { transform: rotate(45deg); opacity: 1; } 75% { transform: rotate(45deg) translateY(-6px) translateX(-6px); opacity: 0; } 100% { opacity: 0; } } /* This is optional and makes the scroll effect smooth */ html { scroll-behavior : smooth; } </style> <script> document.addEventListener('DOMContentLoaded', function() { var section = document.querySelector("#sections > :first-child") if (section) { var bottomDiv = document.createElement('div'); bottomDiv.className = 'bottom'; bottomDiv.innerHTML = ` <a class="scroll-indicator"></a> `; section.appendChild(bottomDiv); document.querySelector(".scroll-indicator").addEventListener("click", function(event) { event.target.closest("section").nextElementSibling.scrollIntoView(); }); } }); </script>

Add the below code in Custom CSS
.header-menu-nav-folder--active+div { transform: translatex(0); } .header-menu-nav-folder--active, .header-menu-controls { display : none; }  

You can remove it.
It looks like a broken URL in the script tag.
You can save it in a text file locally just in case.

I think it opens your default Mailing software

Updated
.header-display-desktop .header-title-nav-wrapper .header-nav-list { display: flex; flex-direction : column; align-items: baseline; } .header-display-desktop .header-nav { flex: 0; } .header-display-desktop .header-nav, .header-display-desktop .header-actions--right { flex-direction : column; width: auto; } .header-display-desktop .header-actions-action--social { order : -2; } .header-display-desktop .header-actions-action--cta { order : -1; margin-top : 5px; margin-bottom : 5px; }  

You can update the margin from below
<style> @media (max-width: 767px) { .restrict-width-1000 { margin-top : 30px!important; } .lock-screen h1 { font-size : 40px!important } .lock-screen p { font-size : 15px!important } } </style>  

Hi,
Add the below code in Custom CSS below all existing code
@media (max-width: 767px) { .header-title-nav-wrapper { flex-basis : calc(100% - 75px - 75px)!important; } }  

Hello,
Add the below CSS in Custom CSS
.list-item-content__button-container { max-width : 100%!important; }  

Can you add a link to your site?

For the hamburger to display on the right, use the below CSS code
.header-burger { order : 2; }  

You can use a CSS media query to only display it on larger screens

 
@media (min-width: 768px) { /* Your code here */ }  

I see a loading error for the .svg file.
Can. you try using .png?

Sure
.sqs-svg-icon--wrapper::before { color : #fff; } .sqs-svg-icon--wrapper:hover::before { color : #d6b600; } .social-icons-color-white.social-icons-style-regular .sqs-svg-icon--list:hover [href*="wa.me"] { opacity : 0.4; } .social-icons-color-white.social-icons-style-regular .sqs-svg-icon--list [href*="wa.me"]:hover { opacity : 1; }  
hover 2.mp4

Add the below code in Custom CSS, at the bottom, below all existing code
.header-title { flex-grow: 20; } .header-title-logo { display : flex; align-items : center; } .header-title-logo a { flex-basis : 227px; flex-shrink: 0; } .header-title-logo::after { width: 100%; padding : 0!important; text-align : center; } @media (max-width: 767px) { .header-title-logo::after { display: none; } }