Jump to content

Edit the subheading in Henson template + adding a few list shape words +

Recommended Posts

Site URL: https://www.marta-guerrero.com/

Hello there, 
I don't know if anyone could help with this. 
I would like to narrow the space between the lines in the custom subheading of my website, and I don't know how to do it.
I am also considering whether to list four words at the right of the word TRANSLATION, with links on them to other pages like
-revision
-proofreading
-etc. 
I would like these words to have the same font as the title and menu (Archivo Narrow, 700 weight, 0,1em).

I appreciate any help you can provide. 


Marta 

Pd- I forgot. Is there a way to hide the HOME in the top right? 

Many thanks!

https://marta-guerrero.squarespace.com/config/design/custom-css


                                    

                        

Link to comment

HI Tuanphan, 

thank you for this. It hasn't worked. I copy the coding that I have of CSS, in case there is something I have done wrong. I don't know if you can tell me. 

Thank you very much 
Marta 

 

body.homepage div#collectionDesc p:first-child {
    position: fixed !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    margin: 0 !important;
}
body.homepage div#collectionDesc p:first-child br {
    display: none;
}
body.homepage div#collectionDesc p:first-child:after {
    content: "Online articles on a variety of topics, Informational brochures, Newspapers articles, Reports, Magazine’s articles, Manuals, User guides, How-to or procedural books, Marketing materials for technical fields, Website content, etc.";
    font-size: 19px;
    color: black; 
    display: block;
    position: fixed;
    top: calc(~"40% + 20px");
    left: 42%;
    transform: translateX(-50%);
}
nav#mainNavigation div {
    visibility: hidden;
  body.homepage div#collectionDesc p:first-child:after {
    top: calc(~"40% + 40px") !important;
}

}

Link to comment
On 5/9/2022 at 11:43 PM, marta-guerrero said:

HI Tuanphan, 

thank you for this. It hasn't worked. I copy the coding that I have of CSS, in case there is something I have done wrong. I don't know if you can tell me. 

Thank you very much 
Marta 

 

body.homepage div#collectionDesc p:first-child {
    position: fixed !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    margin: 0 !important;
}
body.homepage div#collectionDesc p:first-child br {
    display: none;
}
body.homepage div#collectionDesc p:first-child:after {
    content: "Online articles on a variety of topics, Informational brochures, Newspapers articles, Reports, Magazine’s articles, Manuals, User guides, How-to or procedural books, Marketing materials for technical fields, Website content, etc.";
    font-size: 19px;
    color: black; 
    display: block;
    position: fixed;
    top: calc(~"40% + 20px");
    left: 42%;
    transform: translateX(-50%);
}
nav#mainNavigation div {
    visibility: hidden;
  body.homepage div#collectionDesc p:first-child:after {
    top: calc(~"40% + 40px") !important;
}

}

Edit this code

nav#mainNavigation div {
    visibility: hidden;
  body.homepage div#collectionDesc p:first-child:after {
    top: calc(~"40% + 40px") !important;
}

}

to this

nav#mainNavigation div {
    visibility: hidden;
}
  body.homepage div#collectionDesc p:first-child:after {
    top: calc(~"40% + 40px") !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hi Tuan, 

Thank you for this but, it didn't work. 

I don't know if I explained properly. What I am looking for is to reduce the line spacing of the subheading and perhaps to change the font type to Archivo Narrow. 

At the moment is like this (see below). I would like the subheading in black to occupy not much space. Is there anything I can do to do that? 

Also, would it be possible to link some of those words to other pages? 

Sorry, so many things

Thank you!

Marta 

image.thumb.png.1de1748f60a5da2c8973fca13263ef37.png

Link to comment
On 5/13/2022 at 11:30 PM, marta-guerrero said:

Hi Tuan, 

Thank you for this but, it didn't work. 

I don't know if I explained properly. What I am looking for is to reduce the line spacing of the subheading and perhaps to change the font type to Archivo Narrow. 

At the moment is like this (see below). I would like the subheading in black to occupy not much space. Is there anything I can do to do that? 

Also, would it be possible to link some of those words to other pages? 

Sorry, so many things

Thank you!

Marta 

image.thumb.png.1de1748f60a5da2c8973fca13263ef37.png

You mean this space?

space.thumb.png.fe94e9ce5117a0afd9b4e05dc1fd7082.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 5/16/2022 at 9:05 PM, marta-guerrero said:

Yes! Exactly those spaces. 

Use this code

body.homepage div#collectionDesc p:first-child:after {
    top: calc(~"40% + 30px") !important;
    line-height: 30px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hi Tuanphan, 

Thank you. This worked and it looks exactly as I wanted. I have a problem now with how the web looks on the phone. the subheading doesn't feet on the screen. Could you tell me what parameters do I need to change, please? This is how it looks now when I see it from my phone. I wouldn't mind that the text is smaller and takes more space on each line, to fit on the screen. 

Thank you for your help.

Marta 

 image.thumb.png.e6a823b96c412ac1dda5986526298a5d.png

 

Link to comment

Add this to Custom CSS

@media screen and (max-width:640px) {
body.homepage div#collectionDesc p:first-child {
    white-space: nowrap !important;
    font-size: 20px;
}
body.homepage div#collectionDesc p:first-child:after {
    white-space: normal;
width: 100%;
}
}

 

Edited by tuanphan
update new code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Many thanks for your help, tuanphan. Much appreciated. Title looks fine. the subheading looks still a bit out of place. Would it be possible to see it similar as in the desktop view, as a paragraph centred below the main title? perhaps it needs a smaller font to fit.. 

thanks 
marta

At the moment it looks like this: image.thumb.png.c19afd7c7313869bcb731853bbbad1b5.png

 

 

Link to comment
On 5/25/2022 at 9:05 AM, tuanphan said:

Add this to Custom CSS

@media screen and (max-width:640px) {
body.homepage div#collectionDesc p:first-child {
    white-space: nowrap !important;
    font-size: 20px;
}
body.homepage div#collectionDesc p:first-child:after {
    white-space: normal;
width: 100%;
}
}

 

Updated new code. You can check it again.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.