i used media queries in my website but i doesn`t work

I want to add media queries: @media screen and (max-width: 768px), but it seems like it's not working because every time I inspect it using developer tools, nothing happens, and my website still looks like a disaster. Hope for an immediate reply. Thank you!

Can you provide some important information? What's your website URL? Can you share your complete code, I can't check one snippet in isolation (there's an extra closing bracket in the screenshot but I have no idea if that relates to prior code). Also, what are you trying to achieve? A paragraph font set to 1px with a line height of 50px would be completely illegible.

This is my url: https://www.virtualaccountantnyc.com/ 

I just want to achieve responsiveness in mobile. How can I do that? It seems that nothing happens. 

Also this is my entire code:  

html {
  scroll-behavior: smooth;
}
html.squarespace-damask .sqs-blockStatus, .sqs-block .removed-script {
  display:none;
}
.user-items-list-simple[data-alignment-vertical="middle"] {
 align-items: self-start;
}
  #block-fcc81c520b39e6f05965 h1{
    font-size:40px;
  line-height: 45px;
   font-family: Tahoma;
  letter-spacing:2px;
  }

 .header-nav-folder-item {
    line-height: 1.3;
    border: 1px solid black;
    width: 300px;
   padding:10px;
}
.dqiKFy {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 2px;
}
.header-nav-item--active a {
background-image: none!important;
}

.sqs-announcement-bar {
  padding:8px;
  width: 100%;
  position: fixed;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
background: linear-gradient(10deg, #2675A6,#20638C);
}
.sqs-announcement-bar strong{
  font-size:15px;
  font-weight:bolder;
  letter-spacing:2px;
  font-family:'Poppins';
  margin-right:10px;
}

.sqs-announcement-bar em {
     font-size:13px;
  font-style: normal;
  text-transform: none;
  border: 1px solid #fff;
  border-radius:5px;
  padding: 7px 12px; 
   cursor: pointer; 
  margin-left: 15px;
  font-weight: 00;
  transition: background-color 0.3s ease;
}

.sqs-announcement-bar-close {display: none}
/* Select the navigation bar element */
/*site logo*/
.header .header-title-text a {
  font-size:20px;
  letter-spacing:2px;

}
.header .header-announcement-bar-wrapper {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

/* Select the navigation bar element */
.header {
    position: fixed; /* Set position to fixed */
    top: 0; /* Position at the top of the viewport */
    width: 100%; /* Make it span the entire width */
    z-index: 1000; /* Ensure it appears above other content */
    background-color: #333; /* Background color */
}

/* Style for the links inside the navigation bar */
.header a {
    
  color:#3D3B40!important;
    padding: 5px 0px; /* Padding */
    font-size: 15px;
  letter-spacing:1.2px;
 
 
}

/* Hover effect for links-- nav links hover */
.header a:hover {
  color: #4477ce!important; 
}

#block-09224a3751d9b479e6b7 h1 {
  font-size:40px;
  line-height: 40px;
  font-family: Sans-serif;
  letter-spacing:2px;
}

.header .icon svg {
  fill: white !important;
}

.header .icon--fill {
  background:#29A7D9!important;
}

/* Hover animation for rotating the icon */
.header .icon--fill:hover svg {
  color:#DFF5FF;
  transform: rotate(360deg); /* Rotating the SVG element by 360 degrees on hover */
  transition: transform 0.5s ease; /* Adding a transition effect to make the rotation smooth */
}

/* about company */
#block-yui_3_17_2_1_1709468258391_46543 h2 {
  letter-spacing: 2px;
  color:  #20638C!important;
  font-size: 22px;
  font-weight: bolder;
  padding-bottom: 10px;
}

.sqs-editable-button.sqs-button-element--primary {
    transition:opacity 0.1s linear 0s;
    backface-visibility: hidden;
    background-color: #4477ce;
}

/* #block-yui_3_17_2_1_1709517425977_47792 */
#block-yui_3_17_2_1_1709517425977_47792 {
  background-image: url('https://raw.githubusercontent.com/loriiqw/virtualnyc/main/istockphoto-1455701949-612x612.jpg');
  background-size: cover;
  background-position: center;
}

/* Remove padding-top from a specific section */
section[data-section-id="65e3ff6f0d057315fd546ca6"] {
  padding: 0 !important;
}

/* #block-yui_3_17_2_1_1709468258391_46543 */
#block-yui_3_17_2_1_1709468258391_46543 {
  padding: 0 !important;
}

/* your financial */
#block-2f10a7934424cb31c481 p {
  color: #2E2D2D !important;
  line-height: 20px !important;
  font-size: 30px;
  font-weight: 700;
}

/* #block-d5896c777d6c1bf78e3d p */

#block-d5896c777d6c1bf78e3d p {

  color: #2c3038 !important;
  line-height: 25px;
  font-size: 14px;
  text-align: justify;
  padding-top: 25px;
}

#block-c8a8d0a048777ba8ea67 .sqs-block-button-element {
background-color: #29A7D9!important;
}

/*seperator*/
[data-section-id="65e51c4a282e9e4657ffa1e0"]  {
  padding-top:20px;
}
/*financial matter*/
    #block-yui_3_17_2_1_1709517425977_53745 p{   
    color:white;
    font-size: 35px;
    letter-spacing:2px;
    line-height:25px;
     text-align: center;
      text-decoration: underline #fff ;
     text-underline-offset: 15px;
  }
#block-yui_3_17_2_1_1709517425977_66329 p{
  line-height:20px;
  text-align:justify;
  color:#E3E9F4;
}
#block-yui_3_17_2_1_1709517425977_113774 h1 {
  letter-spacing: 2px;
  color: #4477ce !important;
  font-size: 20px;
  font-weight: bolder;
  padding-bottom: 10px;
}
#block-yui_3_17_2_1_1709517425977_126319 p{
   color: #2c3038 !important;
  line-height: 20px !important;
  font-size: 30px;
  font-weight: 700;
}

#block-yui_3_17_2_1_1709530699614_13589 {
  opacity: 0.5; /* Adjust the opacity value as needed */
  background-color: blue !important; /* Change 'blue' to the color you want */
  border-radius: 10px; /* Adjust the border-radius value as needed */
}

/* your CSS code here */
.graph {
        width: 350px; /* Adjust size as needed */
        height: 15px; /* Adjust height as needed */
        background-color: #29A7D9; /* Background color of the graph */
        border-radius: 5px; /* Rounded corners */
        margin-bottom: 10px; /* Add margin to separate bars */
  
    }

    .bar {
        height: 100%;
        background-color:#1F628E; /* Color of the rating bar */
        border-radius: 5px; /* Rounded corners */
    }

    .graph1 {
        width: 300px; /* Adjust size as needed */
        height: 15px; /* Adjust height as needed */
        background-color: #A2CCF6; /* Background color of the graph */
        border-radius: 5px; /* Rounded corners */
        margin-bottom: 10px; /* Add margin to separate bars */
    }

    .bar1 {
        height: 100%;
        background-color: red; /* Color of the rating bar */
        border-radius: 5px; /* Rounded corners */
    }

/* services */
[data-section-id="65f108060484c634eaa1a0e3"] {
  font-family: Sans-serif;
}
[data-section-id="65f108060484c634eaa1a0e3"] h2 {
  font-size: 15px;
  text-align:left;
}
/* services paragraph */
section[data-section-id="65f108060484c634eaa1a0e3"] p {
  color: #2c3038 !important;
  font-size: 15px;
  text-align:justify;
  line-height: 25px; /* Adjusted line height for better readability */
  text-overflow:ellipses;
}
.user-items-list-item-container {
  border-radius: 5px;
  transition: 0.3s !important;
}
#siteWrapper .user-items-list-item-container.user-items-list-simple[data-title-font-unit="rem"] .list-item-content__title {
    font-size: 20px;
    font-weight: 600 !important;
    padding: none;
    line-height: 20px;
    text-align: center;  
    color: #20638C !important;
}
.user-items-list .list-section-title p {
  margin: -8px;
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  color: #20638C !important;
}

/*button*/
[data-section-id="65f108060484c634eaa1a0e3"] .sqs-block-button-element {
    background-color: #4477ce !important;
    color: white !important;
  }
/*atisfaction*/
[data-section-id="65eab22ca080b2408364f434"] {
  font-family:Sans-serif;
}
[data-section-id="65eab22ca080b2408364f434"] h2{
   color: #434141 !important;
  font-size:20px;
  line-height: 18px;
  text-transform:none ;
  padding-top:20px;
  padding-bottom:20px;
  text-align:justify;
  
}
[data-section-id="65eab22ca080b2408364f434"] p{
 font-size:12px;
  text-transform:uppercase;
  font-weight:700!important;
  letter-spacing:2px;
  color:#20638C;
}
#block-yui_3_17_2_1_1710729110727_9653 p{
  color: #2c3038 !important;
  line-height: 20px !important;
  font-size: 30px;
  font-weight: 700;
}

/*list services hover*/
.list-item-content__button{
opacity:0;
width:100%;
transform:translatey(-95%);
border-radius:0!important;
height: 28rem!important;
margin-bottom:-28rem!important
}
.list-item-content__button:hover{
  opacity:0;
}
.list-item {

background:none;
}

.list-item:hover{
  transition: 0.3s !important;
}
/* new section* we are here*/
.sqs-block-html .sqs-block-content  h4 {
  color:#434141;
 padding-bottom:15px;
  font-size:25px;
  letter-spacing:2px;
}
#block-99354f9453f3529f0a99 p{
  line-height:20px;
  text-align:justify;
  font-size:14px;
}

/*why choose us*/
#block-yui_3_17_2_1_1711087929642_52020 p{
  letter-spacing: 2px;
  color: #20638C !important;
  font-size: 25px;
  font-weight: bolder;
  padding-bottom: 10px;
}
#block-yui_3_17_2_1_1711087929642_54585 p{
  font-size:15px;
  line-height:25px;
  text-align:justify;
}
/*icon*/
#block-yui_3_17_2_1_1711087929642_95698 p {
  font-size:12px;
}
#block-fe2f5e8377b49a9e48dc p{
  font-size:12px;
}
/*business planning*/
#block-yui_3_17_2_1_1711087929642_58657, p{
font-size:15px;
   padding-top:3px;
}

/*95*/
#block-yui_3_17_2_1_1711090827350_44474 p,
#block-54792ed2a5ed462831e7 p,#block-103e62a3f6e6aa2edd1d p,
#block-e0b6f345d2793b408db6 p, #block-35b0b39b593b79655db1 p{
  padding-bottom:6px;
}
/*2*/
#block-8d107b12cf26b55ae092 p,#block-b4511b98fc8527458188 p,#block-31a4196bdf1ef352696d p,
#block-37036678df588af40609 p{
 padding-top:8px;
}
/*footer*/
/*providing*/
#block-yui_3_17_2_1_1711432978800_21249 p{
font-size:14px;
line-height:20px;
text-align:justify;
margin-left:55px;
padding-top:20px;
font-family:sans-serif;
}

#block-yui_3_17_2_1_1711328768058_24933 P{
position: relative; /* Set position relative to allow absolute positioning of pseudo-element */
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  padding-top: 10px; /* Adjust padding-top as needed */
  padding-bottom:15px; /* Adjust padding-bottom as needed */
}
#block-yui_3_17_2_1_1711328768058_24933 P::after {
  content: ''; /* Add content to pseudo-element */
  position: absolute; /* Position the pseudo-element absolutely */
  bottom: 0; /* Align the pseudo-element to the bottom */
  left: 0; /* Align the pseudo-element to the left */
  width: 100px; /* Adjust width as needed */
  height: 4px; /* Adjust height as needed */
  background-color: #20638C; /* Adjust color as needed */
}

#block-7dde91a37326a36e942f p{
line-height:10px;
font-family:sans-serif;
}

#block-a364023d6336426d8a3d p{
position: relative;
font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  padding-top: 10px; /* Adjust padding-top as needed */
  padding-bottom:15px; /* Adjust padding-bottom as needed */
}
#block-a364023d6336426d8a3d p::after {
  content: ''; /* Add content to pseudo-element */
  position: absolute; /* Position the pseudo-element absolutely */
  bottom: 0; /* Align the pseudo-element to the bottom */
  left: 0; /* Align the pseudo-element to the left */
  width: 100px; /* Adjust width as needed */
  height: 4px; /* Adjust height as needed */
  background-color: #20638C; /* Adjust color as needed */
}

#block-ef52e4a7fe57e7507606 {
  margin-left:14px;
}
.socialaccountlinks-v2-block .social-icons-style-knockout .sqs-use--mask, .social-account-links-v2-block .social-icons-style-knockout .sqs-use--mask {
 fill: #29A7D9!important;
}
/* Media query for smartphones (portrait and landscape) */
@media only screen and (max-width: 640px) {
  
  /* WE ARE HERE*/
  #block-9f2676d16a4a13e2a877 h4{
    line-height:30px;
  }
    /* Adjusting font size for smartphones */
   /* rs for site title */
  .header .header-title-text a {
  font-size:15px;
   padding:5px;
    letter-spacing:1px;
    }
  /* for the navbar*/
  .header .header-announcement-bar-wrapper {
  padding-top: 6vw;
  padding-bottom: 6vw;
  padding-left: 5vw;
  padding-right: 5vw;
  pointer-events: auto;
}
  .announcement-bar-reserved-space .sqs-announcement-bar-dropzone {
  min-height: 2..8em;
}
  .sqs-announcement-bar p{
    font-size:12px;
  }
  .sqs-announcement-bar {
  padding: 6px; 
}
  #block-fcc81c520b39e6f05965 h1 {
  font-weight:600!important;
  font-size:30px;
  line-height:32px;

  font-family: Sans-serif;
  letter-spacing:2px;

   
}
  section[data-section-id="65e3ff6f0d057315fd546ca3"] {
    padding-top:50px! important;
    padding-bottom:0px!important;
  }
  
  .fe-block-09224a3751d9b479e6b7 {
    align-items:center;
    /*width: 350px;
    height:400px; */
  }
  .sqs-announcement-bar p{
    letter-spacing:1px;
  font-size:11px;

    align-items: center;
 font-family:'Poppins';
}

.sqs-announcement-bar em {
     font-size:10px;
  font-weight:600;
  border: 1px solid #fff;
}
  .header-menu-nav-folder-content {
    max-width: 80%; /* Adjust the percentage as needed */
    margin: 0 auto; /* Centers the element horizontally */
  }
  #block-yui_3_17_2_1_1709468258391_46543 h2{
    font-size:16px;
  }
  #block-2f10a7934424cb31c481 p{
    font-size:25px;   
  }
  section[data-section-id="65e51c4a282e9e4657ffa1e0"] {
    padding-top:40px;
  }
 #block-yui_3_17_2_1_1709517425977_53745 p{
   margin:5px;
    color:white;
    font-size: 26px;
   font-weight:600!important;
    letter-spacing:2px;
    line-height:30px;
     text-align: center;
   text-decoration: none ;
  }
  #block-yui_3_17_2_1_1709517425977_66329 p {
    padding:25px;
    font-size:13px;
    padding-top:10px; 
  line-height:20px;
  text-align:justify;
  color:#E3E9F4;
  }
 #block-8bb498cc7d30522224e6 p{
font-size:14px;
text-align:justify;
   margin-right:15px;
margin-left:15px;

}
  #block-yui_3_17_2_1_1711328768058_24933 P{
position: relative; 
  font-size: 15px;
}
  #block-7dde91a37326a36e942f p{
    font-size:14px;
  }
  #block-a364023d6336426d8a3d p{
font-size:15px;
}
  #block-yui_3_17_2_1_1711334792466_3227 p{
    font-size:14px;
}
  #block-e9ed6def9e9cd2c21ceap{
    font-size:14px;
  }
  #block-bb81c37d5566dee45402 {
    align-items:center;
  }
  #block-yui_3_17_2_1_1711432978800_21249 {
    margin-left:20px;
  }
 
@media screen and (max-width: 768px) {
  #block-fcc81c520b39e6f05965 h1 {
    font-size:10px!important;
    line-height:20px!important;
  }
#block-d5896c777d6c1bf78e3d p{
    font-size:1px!important;
  line-height:50px!important;
  }
}
}

You website is not publicly visible, and you haven't shared the site wide password.

I think you have a few problems in that code, the second media query (max-width: 768px)  is inside the first: (max-width: 640px).

I also couldn't see the first code you share in that CSS.

This is my url: https://www.virtualaccountantnyc.com/

I'm so sorry for not providing a password to access my website. Hope you can help me with this one. I really need to make progress on this website. I appreciate your kindness. Thank you so much!

I want my website to be responsive, but I'm struggling to achieve it. I've attempted using media queries, but they don't seem to be functioning as desired. Could you please assist me with this issue? Thank you!

The biggest problem you have is that the line height for the text is too small which is causing the text to overlap when it wraps. Try a value of 1.2em or more.

The second problem is that the text blocks overlap each other so when the text wraps and takes up more vertical space the text overlaps.

Thank you very much for your kindness, Ziggy! I also want to understand why my service section is not properly aligned on smaller desktop screens. I designed the template on a large monitor, but when I opened it on my laptop, the elements were not aligned correctly. I aim to achieve better alignment. This is my CSS in the service section:  

Additionally, I've noticed that my logo appears too small on my website. I'm seeking guidance on applying a CSS style to enlarge it. I'm struggling to figure out how to resize my logo properly. Thank you for your assistance! 

 

1 hour ago, lorainedeleonnnn said:

Additionally, I've noticed that my logo appears too small on my website. I'm seeking guidance on applying a CSS style to enlarge it. I'm struggling to figure out how to resize my logo properly. Thank you for your assistance! 

You don't need CSS, adjust it in the header settings when editing a page.

1 hour ago, lorainedeleonnnn said:

I also want to understand why my service section is not properly aligned on smaller desktop screens.

Do you mean when they start stacking in a 3x2 grid instead of 5x1?

Try this guide:

https://www.beatrizcaraballo.com/blog/center-align-bottom-auto-list-items

I need my service list to be properly aligned. Look at the first service and the others; they are not evenly spaced. How can I fix that? I don't want it in a 3x2 layout. I hope you can solve this issue. Thank you so much! 

What spacing are you referring to? the gap between the images looks perfectly even to me.

Take a look at the description of the first service, it does not align with the other paragraph of the list of items. Hope you can solve this, Ziggy. Thank you so much. 

This is my CSS code for the service section:  

7 hours ago, lorainedeleonnnn said:

it does not align with the other paragraph of the list of items

This is tricky to solve, but this code should help. Add to Custom CSS:

@media only screen and (min-width:768px) and (max-width:1500px) {
  #siteWrapper .user-items-list-item-container.user-items-list-simple[data-title-font-unit="rem"] .list-item-content__title {
    min-height: 42px;
  }
}

 

Hi Ziggy! Nothing happened when I applied the given code. What can I do? I hope you can help me with this one. I designed my website for a large desktop view, but when I try it in a smaller desktop size, this issue occurs. 

This is my URL: https://www.virtualaccountantnyc.com/

Ziggy, how can I achieve an appealing look for my announcement bar on mobile devices? Despite implementing media queries, I haven't seen any changes. Also, could you assist me in making my header title (I mean virtual accountant NYC) more visually appealing? Thank you so much, Ziggy! Your assistance has been invaluable to me. I'm hopeful you can guide me through my coding challenges. 

This is my media query : @media only screen and (max-width: 640px) {

What is site url?

1 hour ago, lorainedeleonnnn said:

What can I do?

Try this adjustment:

@media only screen and (max-width:1500px) {
  .list-item-content__title {
    min-height: 42px !important;
  }
}

 

how can i achieve to be responsive in tablet size?

this is my URL: https://www.virtualaccountantnyc.com/

Nothing changed, Ziggy. Please help me with this issue. I remember that I applied this code; that's why the first list is up:
.user-items-list-simple[data-alignment-vertical="middle"] {
    align-items: self-start;
}
And even though I removed it, my service section content is not properly aligned. What can I do, Ziggy? I need your help with this one. Hope you can help me. Thank you!"

Edited April 7 by lorainedeleonnnn

On 4/7/2024 at 1:49 PM, lorainedeleonnnn said:

Nothing changed, Ziggy. Please help me with this issue. I remember that I applied this code; that's why the first list is up:
.user-items-list-simple[data-alignment-vertical="middle"] {
    align-items: self-start;
}
And even though I removed it, my service section content is not properly aligned. What can I do, Ziggy? I need your help with this one. Hope you can help me. Thank you!"

You can use this CSS code

.user-items-list-item-container[data-section-id="65f108060484c634eaa1a0e3"] h2 {
    min-height: 45px;
}