Mobile optimization

Site URL: https://www.casatalu.com/

Hello!  I have set a home page image that won't fit to mobile screen. I have tried different codes to optimize mobile view but it just don't work. My site is www.casatalu.com. Does someone know how to fix it? I think I have the 7.0 version.

Hi. Which image? You mean image under header?

I already fix it! thanks, i used this css code! 

/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
#casa-talu-inicio img {
display: none;
}

#casa-talu-inicio .sqs-block-image img {
display: block;
}

#casa-talu-inicio {
background: url('https://images.squarespace-cdn.com/content/5effb4682ddef016da00919b/1594079046297-SVW9Q4V35LHJBYE0UYDC/Group+3.png?content-type=image%2Fpng');
background-repeat: no-repeat;
background-size: 100%;
}
/* Insert Code for Mobile Above This Line */
}

Hi,

When viewing my site on a mobile the title is not optimised and I thought this was done automatically, can anyone help. See attached screenshot showing the letter G on a new line.

34 minutes ago, neverstopcruising said:

Hi,

When viewing my site on a mobile the title is not optimised and I thought this was done automatically, can anyone help. See attached screenshot showing the letter G on a new line.

Can you share link to page in screenshot? We can check easier.

42 minutes ago, tuanphan said:

Can you share link to page in screenshot? We can check easier.

Sorry what do you mean, you want my website page?

https://neverstopcruising.squarespace.com

19 hours ago, neverstopcruising said:

Sorry what do you mean, you want my website page?

https://neverstopcruising.squarespace.com

You can reduce font size on mobile only. Add to Home > design > Custom CSS

@media screen and (max-width:767px) {
span.site-title-text {
    font-size: 22px !important;
}
}

1 hour ago, tuanphan said:

You can reduce font size on mobile only. Add to Home > design > Custom CSS

@media screen and (max-width:767px) {
span.site-title-text {
    font-size: 22px !important;
}
}

 

Excellent. Thanks 

Hello,

I would like to know how I can have 2 mobile version for my website, one for the Iphones 6/7/8 and one for the Iphones X/XS/11/12

I cannot manage to do the media query properly. If someone can help me on that, that would be awesome

I have tried this but doest work

@media only screen and (max-width: 640px) and (max-height:811px)";
@media only screen and (max-width: 640px) and (min:height:812px)";

On 11/26/2020 at 12:13 AM, ArthurPrnt said:

Hello,

I would like to know how I can have 2 mobile version for my website, one for the Iphones 6/7/8 and one for the Iphones X/XS/11/12

I cannot manage to do the media query properly. If someone can help me on that, that would be awesome

I have tried this but doest work

@media only screen and (max-width: 640px) and (max-height:811px)";
@media only screen and (max-width: 640px) and (min:height:812px)";

 

You can add all sections on one page, then we can give the code to show some on desktop or mobile only