Make website responsive across all size Screen devices.

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 

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

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

Phone screen size

Thanks in advance

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 

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

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

Phone screen size

Thanks in advance

Which breakpoint do you need help?

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.

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. 

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

Thanks

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