Jump to content

Mobile optimization

Recommended Posts

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.

 

Link to comment
  • Replies 9
  • Created
  • Last Reply

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 */
}

Link to comment
  • 3 weeks later...
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.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...

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)";

 

Link to comment
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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.