Padding, Font and Column Problems

Site URL: https://carrot-whale-lsgz.squarespace.com/

Hi, 

Ive working hard to get my site ready for launch but despite my efforts, theres a few things which i just cannot solve and would appreciate some help. 

The website login details are:  www.dimondlondon.com

I have listed them below with images and links:

1. Is it possible to remove all image overlays over the entire site??

2.   https://carrot-whale-lsgz.squarespace.com/bespokework

3.  https://carrot-whale-lsgz.squarespace.com/bespokework

4. https://carrot-whale-lsgz.squarespace.com/process

5. https://carrot-whale-lsgz.squarespace.com

6. https://carrot-whale-lsgz.squarespace.com/contact

If you can help, it would be much appreciated! Thank you in advance. 

Don't share login info here.

#1. Looks fine here. Can you take a screenshot of image with overlay?

#2. Add to Design > Custom CSS

/* List title items spacing */
.user-items-list {
    padding-top: 5px !important;
}

#3. Add to Design > Custom CSS

/* Need inspiration gap */
div#block-ee7acfed9b47fe963932 h3 {
    margin-bottom: 0px;
}
.user-items-list {
    padding-bottom: 5px !important;
}

#4. Add to Design > Custom CSS

/* Process 4 columns */
@media screen and (min-width:768px) {
.user-items-list-item-container[data-section-id="6149caf8ed8271425783492a"] {
    grid-template-columns: repeat(4,1fr) !important;
}
}

#5. Add to Design > Custom CSS

/* nav links to buttons */
.header-nav-item>a {
    background-color: white;
    color: black !important;
    padding-top: 5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

#6. Add to Design > Custom CSS

/* Form font */
.option *, .description {
    font-family: 'APERCU MONO' !important;
}

17 minutes ago, tuanphan said:

Don't share login info here.

#1. Looks fine here. Can you take a screenshot of image with overlay?

#2. Add to Design > Custom CSS

/* List title items spacing */
.user-items-list {
    padding-top: 5px !important;
}

#3. Add to Design > Custom CSS

/* Need inspiration gap */
div#block-ee7acfed9b47fe963932 h3 {
    margin-bottom: 0px;
}
.user-items-list {
    padding-bottom: 5px !important;
}

#4. Add to Design > Custom CSS

/* Process 4 columns */
@media screen and (min-width:768px) {
.user-items-list-item-container[data-section-id="6149caf8ed8271425783492a"] {
    grid-template-columns: repeat(4,1fr) !important;
}
}

#5. Add to Design > Custom CSS

/* nav links to buttons */
.header-nav-item>a {
    background-color: white;
    color: black !important;
    padding-top: 5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

#6. Add to Design > Custom CSS

/* Form font */
.option *, .description {
    font-family: 'APERCU MONO' !important;
}

 

Thanks so much - they all work except #4, the colums still go from 4, to 3 to 2 as you shrink the screen. Is it possible to keep it 4 and then to 2 and then to 1? It looks very awkward with 3 and then 1 below.

And also #5 - i want the words in the nav bar to be clickable so if i was on a random page and wanted to go back to 'about', I could click and it would take me to the 'about us page' for example. Is that possible?

Thanks again so much for your help!

Harry

12 hours ago, harrydimond said:

Thanks so much - they all work except #4, the colums still go from 4, to 3 to 2 as you shrink the screen. Is it possible to keep it 4 and then to 2 and then to 1? It looks very awkward with 3 and then 1 below.

And also #5 - i want the words in the nav bar to be clickable so if i was on a random page and wanted to go back to 'about', I could click and it would take me to the 'about us page' for example. Is that possible?

 

Thanks again so much for your help!

Harry

#4. The code works with screen 768px or higher. Which screen size do you see problem?

#5. I think need jQuery code, you can post in a new topic, someone maybe help you with this