Issues on Tablet

Site URL: http://www.labelle-artistry.com

Hi! 

I'm in desperate need of help on the tablet version of my website labelle-artistry.com.  The headlines are coming up way too large, the header logo is too small and the alignment is all off  (see pictures below).  Can someone please help me?

Thank you!

Lindsay

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?

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

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;
}
}

Hi Tuanphan!

Thank you so much for all this wonderful help.  I only see one issue so far is on the footer. The Word connect is dropping a line.  Do you know how I would modify the code to prevent this?

Thank you!

Lindsay

On 8/17/2021 at 1:40 AM, LindsayMcconnell said:

Add this CSS

/* Footer connect text */
div#block-277eb028fe4849029f28 h3 {
    white-space: nowrap !important;
}