1

I am including two picture of the same section to illustrate what's happening on the website when I drag the screen to a smaller size. I am hoping to use the media queries to prevent such a thing from happening. Dragging the screen size smaller is changing the text and the size of the elements pictured. When I input the media queries into custom css, I see nothing change and my goal is to have the screen size look very similar across all screen sizes that use the website.

Before dragging screen to smaller size: enter image description here

After dragging screen to smaller size: enter image description here

/*For browser/screen widths less than 768px*/
@media screen and (max-width: 1440px) {
    .container {
        max-width: 75%;
    }
    .content {
        width: 50%;
    }
}


@media only screen and (min-height: 900px){
    .container {
        max-width: 75%;
    }
    .content {
        width: 50%;
    }
}


@media only screen and (min-width: 900px) and (orientation: portrait) {
    .container {
        max-width: 75%;
    }
    .content {
        width: 50%;
    }
}

@media only screen and (min-width: 1440px) and (orientation: landscape){
    .container {
        max-width: 75%;
    }
    .content {
        width: 50%;
    }
}



I've tried multiple css media query styles and I have not seen any changes to any pages of the website. Please help me to assess what I am doing wrong. I am exploring all options to make this website responsive. The divi builder only provides three options, desktop, tablet and mobile for screen sizing. I need more screens recognised which is why I am using custom css for this project. I have noticed especially on macbook air that the screen size is having multiple issues accommodating the size of elements on each page. Some images are cutoff on pages and some are turning into different weird sizes that were not intended to do so.

Thanks in advance!
Mya
  • 19
  • 4

0 Answers0