Jump to content

Is there a way to force mobile responsive-design?

Recommended Posts

Hi all,

Is there a way to force mobile responsive-design?

The blog post I'm looking at looks great on a wide screen until I reduce the width to about half a 27" wide screen then the design starts to deteriorate.

https://projectsinsider.com/project/3-rubida-court-endeavour-hills

lifeisgood

At wide screen:

image.thumb.png.3709e7931890fa80bf09fa1a369a2c4a.png

 

At half screen:

image.thumb.png.dd7cdc56595dacc0a2373511e340216f.png

 

Then just before mobile responsive-design kicks in:

image.thumb.png.e7910f225d91742ee117d0ce5f0a9778.png

 

Mobile responsive-design:

 

image.thumb.png.7b7317773e7b09a4bf7a0bcf0ceb0f31.png

 

Additionally, is there a way to have the page response created in this way whereby the main body does not get reduced until the unused/empty spaces on the left and right have been used first?

https://a-d.com.au/new-apartments-developments/vic/footscray-3011/millhouse

Full screen:

image.thumb.png.e4bf21586c27929860bb5cfbf822683e.png

 

Half screen:

image.thumb.png.02a2ccc6351cbafec7c497108573e68f.png

 

Tablet size I think:

image.thumb.png.0a01c3c5a21f5872fdc18537ec5ceb6b.png

 

Mobile:

image.thumb.png.fbf87329b90cfac3b1e25f9dee84b95a.png

Other similar sites:

https://www.urban.com.au/new-apartments/liberty-one-1-warde-street-footscray

https://www.realestate.com.au/project/millhouse-footscray-600031454

https://www.ibuynew.com.au/apartments/vic/melbourne/east/hawthorn-east/hawthorn-park

Edited by Insider
Link to comment
  • Replies 1
  • Views 420
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

On 10/2/2021 at 2:13 PM, Insider said:

Hi all,

Is there a way to force mobile responsive-design?

The blog post I'm looking at looks great on a wide screen until I reduce the width to about half a 27" wide screen then the design starts to deteriorate.

https://projectsinsider.com/project/3-rubida-court-endeavour-hills

lifeisgood

At wide screen:

image.thumb.png.3709e7931890fa80bf09fa1a369a2c4a.png

 

At half screen:

image.thumb.png.dd7cdc56595dacc0a2373511e340216f.png

 

Then just before mobile responsive-design kicks in:

image.thumb.png.e7910f225d91742ee117d0ce5f0a9778.png

 

Mobile responsive-design:

 

image.thumb.png.7b7317773e7b09a4bf7a0bcf0ceb0f31.png

 

Additionally, is there a way to have the page response created in this way whereby the main body does not get reduced until the unused/empty spaces on the left and right have been used first?

https://a-d.com.au/new-apartments-developments/vic/footscray-3011/millhouse

Full screen:

image.thumb.png.e4bf21586c27929860bb5cfbf822683e.png

 

Half screen:

image.thumb.png.02a2ccc6351cbafec7c497108573e68f.png

 

Tablet size I think:

image.thumb.png.0a01c3c5a21f5872fdc18537ec5ceb6b.png

 

Mobile:

image.thumb.png.fbf87329b90cfac3b1e25f9dee84b95a.png

Other similar sites:

https://www.urban.com.au/new-apartments/liberty-one-1-warde-street-footscray

https://www.realestate.com.au/project/millhouse-footscray-600031454

https://www.ibuynew.com.au/apartments/vic/melbourne/east/hawthorn-east/hawthorn-park

What do you want to change in mobile? 

About setting style for mobile responsive, you can take into consideration Responsive Web Design - Media Queries

 

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.