Media queries do not work

  • illingworth1

    (@illingworth1)


    7 years ago

    Hello,

    I’m trying to make my site usable on tablets and smartphones but I’m having some problems with media queries.

    Currently, on mobile phones the text is cut off. I would like the pages to adapt to the width of a smartphone so that the user can normally read the content of the site.

    To do this, I use the following code:

    @media screen and (min-width:450px){
    html {
    width:100%;
    }
    }

    However, this code does not change the layout of my site via mobile while the code is correct.

    Could you give me some information on how to resize the page according to the support used by the visitor? Thank you!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Ben Sibley

    (@bensibley)

    7 years ago

    Thanks for using Chosen!

    This CSS has been added to the site which is making the content area 1450px wide at all screen sizes:

    .post-content {
  width: 1450px;
}

    Please remove that code and the content should then adapt to the screen size.

    Thread Starter illingworth1

    (@illingworth1)

    6 years, 10 months ago

    Thank you for your answer, I only saw it a short time ago.

    Your solution is working perfectly and I thank you.

    However, some tables on my site are still unreadable on my site.

    I tried to remove all the “widths” associated with the tables but nothing works, nothing can solve the problem. I don’t understand because some paintings don’t have this problem…

    Here is an example of a page for which the problem appears responsive: https://www.meilleur-videoprojecteur.com/videoprojecteur-4k/

    Do you have a solution for me? Thank you in advance, cordially

    • This reply was modified 6 years, 10 months ago by illingworth1.
    Theme Author Ben Sibley

    (@bensibley)

    6 years, 10 months ago

    I see what you mean. Tables can be tough to style responsively.

    Please give this CSS a shot and let me know how it works for you:

    .wp-block-table {
  display: block;
}
.wp-block-table tbody,
.wp-block-table tr {
  width: 100%;
  display: block;
}
Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Media queries do not work’ is closed to new replies.