Jump to content

Issues on Tablet

Recommended Posts

  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Hi,

Screenshot 1. Tablet Footer

How about making footer to 2 rows with first row is logo + icons, second row is 3 columns? If you like this, we will give the code

Screenshot 2. Make 4 buttons under image on tablet or?

Screenshot 3. Increase text width & Make buttons side by side?

Screenshot 4. Reduce Kind words text to make it no break.

What do you think?

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 8/11/2021 at 6:33 PM, LindsayMcconnell said:

Hello-

I like all of your suggestions and would very much appreciate the code. Is it possible to get a code to adjust all H3 text for tablet? It looks like size 15 looks beat for those headlines. 

Thank you in advance,

Lindsay

Add to Design > Custom CSS

/* Tablet footer */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-6086d9fa3bd0fc2ff2593589 .span-12>.row>.span-2:first-child {
    width: 100%;
}
div#page-section-6086d9fa3bd0fc2ff2593589 .span-12>.row>.span-2:first-child .image-block {
    width: 30%;
    margin: 0 auto;
}
/* 4 buttons */
div#page-section-6086d9ea3bd0fc2ff2593316>.row>.span-4 {
    width: 50%;
}
div#page-section-6086d9ea3bd0fc2ff2593316>.row>.span-7 {
    width: 30%;
}
/* banner 2 buttons */
div#page-section-6086d9ea3bd0fc2ff259331e .span-5 {
    width: 100%;
}
/* heading 3 */
h3 {
	font-size: 20px;
}
}

 

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 8/17/2021 at 1:40 AM, LindsayMcconnell said:

IMG_8805BAA3F721-1.jpeg

Add this CSS

/* Footer connect text */
div#block-277eb028fe4849029f28 h3 {
    white-space: nowrap !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

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.