Style page content with css without affecting mobile version

  • Resolved blomstrande

    (@blomstrande)


    9 years, 1 month ago

    So, I’ve been trying to style the page content on my front page and on my “about” page. I’ve done this by adding a “div” in the page html and then styling it with some custom css. For the desktop version this works like a charm and I’ve got the layout I wanted – however just realized that the styling I’ve done also affects the mobile version. This is no good good since the width of the text is far to wide for the mobile version. Is there any way I can make the css changes I’ve done to only affect the desktop version of the website?

    All hel much appreciated since the website should be up and running as soon as possible…

    Link to the specific page that is causing problems: https://blomstrande.com/om-oss/

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hey! If possible, could you post the CSS that you’ve written so I can get a better idea of what you’re trying to style?

    If you want your code to only affect your page at non-mobile sizes, be sure to wrap it in a media query.

    @media (min-width: 992px)   {

         COPY AND PASTE YOUR CUSTOM CSS HERE

}

    Give that a try and let me know if it works for you.

    From what I see you just need to change this:

    #intro {
    width: 700px;
    margin-left: 220px;
}

    To this:

    #intro {
    max-width: 700px;
    margin: auto;
}

    Kadence Themes

    Thread Starter blomstrande

    (@blomstrande)

    I first tried to change the css to auto as Kandence Themes suggested but for some reason that messed up the styling when viewing the site on my desktop.

    The first suggestion with adding the @media that kevin suggested worked perfectly though!

    Thank you so much both for the fast and accurate help, problem solved!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Style page content with css without affecting mobile version’ is closed to new replies.