NP3000

Thanks, all sorted. 

Hi, I'd like to feature a logo as an SVG in the footer of a site. I've managed to add an SVG to the header using some code, so I assume its possible to do in the footer as well. Only I cannot find any info about this on the interwebs. 

Any help would be much appreciated. 

Nick

Thanks very much Ziggy, you saved me again. 

Cheers,

Nick

Hi, I've added some CSS to allow a font to appear differently on my site: www.nickpointon.co.uk

However, at smaller mobile screen sizes the word Graphic Designer starts to split allowing the 'r' of Designer to flow onto the next line for example. 

How can I make sure that the word does not split? 

Here is the code I'm currently using, I thought that using 'word-wrap: keep-all;' would make sure the word doesn't split but it's not working. Any suggestions would be greatly appreciated. 

Cheers,

Nick

.Marquee * {
  color: white;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1.2px;
  -webkit-text-stroke-color: white;
font-family: Obviously wide bold;
font-style: normal;
font-weight: normal;
word-wrap: keep-all;
//  font-size: 60px;
//letter-spacing: 0.5rem;
}

// Mobile H1 text size //
@media screen and (max-width:750px) 
{ h1 {font-size: 35px;
  line-height: 46px;
overflow-wrap: keep-all;
    }}

@media screen and (max-width:750px) 
{ h2 {font-size: 30px;
  line-height: 40px;
  word-wrap: keep-all;
    }}

h1 em strong,
h1 strong em {
  color: white;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1.2px;
  -webkit-text-stroke-color: white;
  font-size: 60px;
letter-spacing: .2rem;
 font-family: Obviously-wide;
  font-style: normal; /*if you want to remove the italics*/
  font-weight: normal; /*if you want to remove the bold style*/
  //text-transform: uppercase; /*if you want to remove the all uppercase or lowercase style*/
@media screen and (max-width:750px) {
  font-size: 48px;
word-wrap: keep-all;
}
}

Thanks for the trying YogaP and thanks for the underline code tip. 

I came up with a work around.

Ive overlaid a blank png with the link added to it. No code needed. 

Nick: 1 - Squarespace: 0. 

I'm really sick of Squarespace's awkwardness. 

Thanks for your reply but I find your explanation hard to follow. Could you rewrite it please? 

Basically, I want the attached image of the intended text box to lose the underline on the text and make the whole box a clickable link. 

It needs to link to another page on the site.
 

Is it possible to make a text block (that has a background colour) a clickable link? 

Instead of the text being the link, I want the whole text block to be the link. 

Is this possible in CSS or is there a different way to achieve this? 

Thanks

Yes, I was thinking the same but wanted to check if there was a way to do it with CSS first.

Thanks again Ziggy, 

Nick

Hey Ziggy, thanks for your quick response. 

The website is www.sessionstudio.com

I just want to centralise the text and buttons within the banner. And yes, if the whole site can be blurred slightly until the buttons are selected. Or, if the banner could float in front of the whole site until a button is selected then that would be great. 

Many thanks,

Nick

Hi, I'm trying to move the position of the buttons in the Cookie Banner to below the text and centred within the banner. Please see the attached image to see what I mean. 

I've managed to make some edits to the banner with the below code but I don't know CSS well enough to achieve my goal

Your help would be greatly appreciated.

If there's a way to blur the background slightly until a button is pressed then this would be extra appreciated! 

Many thanks,

Nick

.sqs-cookie-banner-v2 p, .sqs-cookie-banner-v2 a {
 color: #eb6521 !important;
}
.sqs-cookie-banner-v2-accept {
font-size: 16px !important;
color: #eb6521 !important;
}
.sqs-cookie-banner-v2 {
  height: 200px;
}
.sqs-cookie-banner-v2 p, .sqs-cookie-banner-v2 a {
  font-size: 14px;
}

Thanks very much Ziggy. I'm using 7.1. I'll adjust the current css to 751px and see how that looks. 

I'll send the website url and password in an email as the website is not live yet. 

Also, can you recommend any screen emulators? I've been using the Emmet Re:view chrome plugin but I'm not sure how reliable it is. 

Thanks again

Hi, can somebody give me the most widely used screen size's used on your media queries please? 

I'm struggling to get my site to behave as it should on iPhone's, Android phones, tablets and desktop. 

Every blog and website post has different screen sizes stated in their breakpoint media queries

Also, should I always use min width as well as max width? Or just one of them?

Your help will be greatly appreciated! 

Thanks

Thanks for you reply Tuanphan.

I will email you with the link to the site. 

Essentially, when I expanded my browser to the full size of my 27.5" screen, the design expanded proportionately up until about 2/3's of the width and then all the text sizes and formatting went out. 

Is it because of the site spacing? The Page Width is set to 1920px and Site margin is 10vw

I'm also having a nightmare with the button sizes at various screen sizes. The code I've added for that is at the bottom of the page.

The formatting for mobile is looking messed up too. 

A friend added the below CSS code to each of the screen sizes which has worked but is effecting other parts of the site:  

@media screen and (min-width: 2304px)
{ h1 {
    font-size: calc(6.5 * 1rem) !important;
  }}

// // // // // // // // // // // 
@media screen and (min-width: 2304px)
{ h2 {
    font-size: calc (5.4 * 1rem) 
!important;
  }}
// // // // // // // // // // // 
This code is effecting the titles in the Carousel testimonials section - I cant figure out how to change it. 
The carousel titles aren't editable in the site styles.
When I Inspect it, the HTML says that the carousels titles are set to H2. In the editor the text is 1.2px
I dont know CSS well enough to edit the above code to exclude either the section id or the Testimonials Carousel. 

@media screen and (min-width: 2304px)
{ h3 {
    font-size: calc(2.6 * 1rem) !important;
  }}

@media screen and (min-width: 2304px)
{ h4 {
    font-size: calc(1.8 * 1rem) !important;
  }}

@media screen and (min-width: 2304px)
{ .sqsrte-large {
    font-size: calc(1.4 * 1rem) !important;
  }}

@media screen and (min-width: 2304px)
{ #siteWrapper .user-items-list-item-container.user-items-list-simple[data-title-font-unit="rem"] .list-item-content__title {
    font-size: calc(1.4 * 1rem) !important;
}}

@media screen and (min-width: 2304px)
{ #siteWrapper .user-items-list-item-container.user-items-list-simple[data-description-font-unit="rem"] .list-item-content__description {
    font-size: calc(1.3 * 1rem) !important;
}}

@media screen and (min-width: 2304px)
{ #siteWrapper .user-items-list-item-container.user-items-list-banner-slideshow[data-title-font-unit="rem"] .list-item-content__title {
    font-size: calc(2.2 * 1rem) !important;
}}

@media screen and (min-width: 0) and (max-width: calc(2303px)) and (orientation: landscape){
.user-items-list .list-section-title {
    font-size: calc(5.4 * 1rem) !important;
}}
  
  @media screen and (min-width: 2304px){
.user-items-list .list-section-title {
    font-size: calc(5.4 * 1rem) !important;
  }}

/ / / / / / / / / / / / / / / /
Buttons code

//Mobile + Tablet Buttons
@media only screen and (min-width:719px) (max-width:1023px)
 { .sqs-block-button-element {
   font-size: 8px !Important;
   padding: 0.9rem 0 !important;
        min-width: 90%;
        width: 90%;
      }
    }

//TABLET BUTTONS
@media screen and (min-width:1024px) (max-width:1280px) 
{.sqs-block-button-element {
    font-size: 6px !Important;
   padding: 0.9rem 0 !important;
        min-width: 90%;
       width: 90%;
}
}

//Desktop Buttons
@media only screen and (min-width:1281px) (max-width:2881px)
 { .sqs-block-button-element {
   padding: 1rem 0 !important;
        min-width: 80%;
        width: 80%;
      }
    }
 

Hi, I need help with making sure the site I'm designing looks good on all screens.

The site is 90% complete. However, its not displaying correctly at larger screen sizes. I've tried to find the correct css code to allow the site to display properly but I cant find it. 

I'm not sure if the code that I've already added to address buttons squashing at various screen sizes is conflicting with the whole sites ability to display properly or if its how the site has been designed. 

Any help would be greatly appreciated. I need to launch the site on Thursday. 

As its a private client I cant display the url but I can supply it to whoever thinks they can definitely help.