Jump to content

Make website responsive across all size Screen devices.

Recommended Posts

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

I'm hoping somebody helps me address a problem that I have encountered after finishing up with a web design. I have used meta queries to target specific code blocks for specific screen devices. I'm trying to include medium-size screen devices (640px to 1020px) in my  design. So far, I was able to do small screen devices smaller than 640px and bigger than 1020px. I will be able to fully address this issue and complete a fully responsive web design with the help of someone who can direct me. Some snapshots of the code I'm currently modifying have been attached below.

/*logo location inside header for large screen */
@media only screen and (min-width:1026px){
.header-title-nav-wrapper::after{
  content:'';
  display:inline-block;
  filter: drop-shadow(0px 0px 0px #32273B);
  width:350px ;
  height:350px ;
  margin-right:75% ;
  margin-bottom:-30%;
  margin-top:-35%;
background:url("https://static1.squarespace.com/static/625489cfd1bb3e25eb48f482/t/6264d15125c2c52567db0c60/1650774353433/Pastel_Elegant_Daisy_%D0%A1hamomile_Flower_Herbal_logo-removebg-preview+%281%29.png") no-repeat 0 0; 
  background-size:100%;
   }
}

Big Screen 

image.thumb.png.4a06550e2de8daa019a873918ada096c.png

/*logo location inside header for medium screens */
@media screen and (min-width: 641px) and (max-width: 1025px){
.header-title-nav-wrapper::after{
  content:'';
  display:inline-block;
  filter: drop-shadow(0px 0px 0px #32273B);
  width:200px;
  height:200px;
  margin-left:-30%;
  margin-bottom:-15%;
  margin-top:-35%;
background:url("https://static1.squarespace.com/static/625489cfd1bb3e25eb48f482/t/6263346c385110598db19cf4/1650668652171/Blue_Business_Architecture_Design_Logo_-_Logos-removebg-preview.png") no-repeat 0 0; 
  background-size:100%;
   }
}

Target screen size: not successful

image.thumb.png.1d3077537330fe4a01ff628887253192.png
/*Not display Site name on Phone or tablet Version*/
@media only screen and (max-width:640px){
  .header-title-text {
    display:none;
    }
  }

Phone screen size

image.png.79b3b00e8d30200cd9eda761f063e22d.png

Thanks in advance

Edited by Patus01
Link to comment
  • Patus01 changed the title to Make website responsive across all size Screen devices.
  • Replies 2
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 4/24/2022 at 3:31 PM, Patus01 said:

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

I'm hoping somebody helps me address a problem that I have encountered after finishing up with a web design. I have used meta queries to target specific code blocks for specific screen devices. I'm trying to include medium-size screen devices (640px to 1020px) in my  design. So far, I was able to do small screen devices smaller than 640px and bigger than 1020px. I will be able to fully address this issue and complete a fully responsive web design with the help of someone who can direct me. Some snapshots of the code I'm currently modifying have been attached below.

/*logo location inside header for large screen */
@media only screen and (min-width:1026px){
.header-title-nav-wrapper::after{
  content:'';
  display:inline-block;
  filter: drop-shadow(0px 0px 0px #32273B);
  width:350px ;
  height:350px ;
  margin-right:75% ;
  margin-bottom:-30%;
  margin-top:-35%;
background:url("https://static1.squarespace.com/static/625489cfd1bb3e25eb48f482/t/6264d15125c2c52567db0c60/1650774353433/Pastel_Elegant_Daisy_%D0%A1hamomile_Flower_Herbal_logo-removebg-preview+%281%29.png") no-repeat 0 0; 
  background-size:100%;
   }
}

Big Screen 

image.thumb.png.4a06550e2de8daa019a873918ada096c.png

/*logo location inside header for medium screens */
@media screen and (min-width: 641px) and (max-width: 1025px){
.header-title-nav-wrapper::after{
  content:'';
  display:inline-block;
  filter: drop-shadow(0px 0px 0px #32273B);
  width:200px;
  height:200px;
  margin-left:-30%;
  margin-bottom:-15%;
  margin-top:-35%;
background:url("https://static1.squarespace.com/static/625489cfd1bb3e25eb48f482/t/6263346c385110598db19cf4/1650668652171/Blue_Business_Architecture_Design_Logo_-_Logos-removebg-preview.png") no-repeat 0 0; 
  background-size:100%;
   }
}

Target screen size: not successful

image.thumb.png.1d3077537330fe4a01ff628887253192.png
/*Not display Site name on Phone or tablet Version*/
@media only screen and (max-width:640px){
  .header-title-text {
    display:none;
    }
  }

Phone screen size

image.png.79b3b00e8d30200cd9eda761f063e22d.png

Thanks in advance

Which breakpoint do you need help?

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

I figure it out. Thanks anyways. Would you be able to help with another issue. I would like to be able to to have an image block display on specific orientation based on the screen size. Ex. phone view looks like this.

image.png.928eefcb8545eea170464cc66dd8c515.png

And this is how it looks on devices that are bigger than 687px. How can I change the orientation to make it look vertically and not horizontal. 

image.png.99fbc8475a7a608ebde066b143a15e32.png

For reference. I would attached a direct link to the page in question.

Thanks

LINK: https://www.drbitakhosraviannd.com/about 

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.