Jump to content

Matching the visuals on laptop to desktop.

Recommended Posts

Site URL: https://www.astorfoundation.co.nz/

Hi there!

I have just completed a design on my website and noticed the sizing/placement/alignment on the difference between my laptop screen to my imac desktop screen. 

I want everything to appear exactly as my laptop display for all viewing device. 

How it appears on my iMac desktop:

939049903_ScreenShot2022-04-08at9_55_33AM.thumb.png.252d2c3266ae63b1c92878f7fd75d2ac.png

944387803_ScreenShot2022-04-08at9_56_16AM.thumb.png.5bbdccd0abb7c532ec6173a1cc0b8d02.png

How it appears on my laptop:

1820674588_ScreenShot2022-04-08at9_57_33AM.thumb.png.b522c15eb4ef01ebd30ef6dc84fd7a8e.png

I've placed a css coding to add the faint black background:

#block-770d25534f07d1028f26 {
 background: rgba(0,0,0,0.3);
 padding-top: 2vw;
 padding-left: 2vw;
 padding-bottom: 1.5vw;
}

1813898726_ScreenShot2022-04-08at9_57_37AM.thumb.png.001fcf91609415099331a5b6c890f4df.png

Thank you!

Link to comment
  • Replies 2
  • Views 223
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Thanks @tuanphan for responding. 

I guess my issue would be that the iMac display does not look the same for the macbook display if that makes sense? 

I am more focused on the excess amount of black background that only appears on the iMac 

1006141173_ScreenShot2022-04-09at3_47_21PM.thumb.png.d3f269e575bcf699ae6214c981a537b8.png

and how the separation of the words looking irregular on the iMac but it looks fine on the macbook pro. 

1333063455_ScreenShot2022-04-09at3_47_32PM.thumb.png.c79140579b0d8ca39cfcdd548b85e41f.png

It's just small things that feel like its downgrading the completion of the design and I was just wondering if they could be matched up. 

Thank you for your help.

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.