CSS preview "buggy"?

  • Unknown's avatar
    axelware · Member ·

    Hi,
    I am using the Snaps theme and the Customize preview seems to be “buggy”, it doesn’t show the site description text in the same position as in the saved full size site. It also does kind of a bug with the fonts size, when I am in Customise-Fonts if I change the size for the Heading it affects the Base Font too, but just in the preview, when I save it and go check the site everything looks ok, so it’s not a bad issue but it’s disturbing to me. It’s probably something that I don’t understand rather than a software problem but I thought it worths the comment.
    This is the CSS I have enter in Customise-CSS to move the site description text.

    .site-description {
    margin-bottom: .5px;
    margin-top: 300px;
    }

    So that works for the full size site on a computer monitor and tablets (iPad for me), but on a mobile device (iPhone 5) the site description text is in the same position as in the preview mode, in a lower position than the full size mode.
    After thinking about it, the problem could be that I don’t use a Site Title text which move the site description text when both are present.
    May be the solution would be to enter a Site Title text and hide it with a CSS?

    Thanks for support.

    The blog I need help with is: (visible only to logged in users)

  • kathrynwp · Staff ·

    One issue I see right away is that it’s not possible to use a half a pixel, so this line is invalid:

    margin-bottom: .5px;

    Can you try changing that to a whole number and see if you still have an issue with this?

  • Unknown's avatar
    axelware · Member ·

    Hi @kathrynwp, and thanks for pointing that error, but unfortunately the issue persists even with whole numbers.
    I’ve tried with a value at 0 and 1 and with no value, but the issue still here.

  • Unknown's avatar
    axelware · Member ·

    What is really strange to me is that the site description text is in different positions in computer device and mobile device.
    The mobile device match the CSS preview, but is the computer device which shows as I want it.

  • kathrynwp · Staff ·

    I’m going to have another look at this, but in the meantime I noticed that you’ve hidden the footer credit with CSS, something that isn’t allowed here. All WordPress.com sites (including our VIP clients) need to keep the credit as a requirement of hosting your site here.

    You can tweak the style of the credit a bit if you like, as long as it remains readable. How about a soft grey like this:

    #colophon, #colophon a {
     color: #d4d4d4;
}
  • kathrynwp · Staff ·

    Here are a couple of things:

    So that works for the full size site on a computer monitor and tablets (iPad for me), but on a mobile device (iPhone 5) the site description text is in the same position as in the preview mode, in a lower position than the full size mode.

    When you add custom CSS that affects positioning, that overrides the media queries already set in the theme. Media queries restrict CSS to particular screen sizes and you can learn more about them here.

    You can reapply media queries in your custom CSS.

    So for example, let’s say you wanted your media query to only apply to larger screens above 800px wide, you would change this:

    .site-description {
     margin-bottom: 1px;
     margin-top: 300px;
     text-transform: uppercase;
}

    to this:

    .site-description {
     text-transform: uppercase;
}

@media screen and (min-width: 800px) 

  .site-description {
       margin-bottom: 1px;
       margin-top: 300px;
  }

}

    After thinking about it, the problem could be that I don’t use a Site Title text which move the site description text when both are present.
    May be the solution would be to enter a Site Title text and hide it with a CSS?

    I would always suggest adding a site title, because it appears in the browser’s title bar/tab and search-engine snippets. If you use visibility: hidden instead of display: none that’ll preserve the space it takes up while hiding the actual text.

    I’ll look at your font issue separately.

  • kathrynwp · Staff ·

    It also does kind of a bug with the fonts size, when I am in Customise-Fonts if I change the size for the Heading it affects the Base Font too, but just in the preview, when I save it and go check the site everything looks ok, so it’s not a bad issue but it’s disturbing to me.

    Could you provide a screenshot of this effect in the Customizer as I haven’t been able to replicate it on your site. Please include the entire browser window window so I can see your font settings as well as the preview.

    Here’s a guide on how to make a screenshot:
    http://en.support.wordpress.com/make-a-screenshot/

    You can upload the screenshot – in a graphic format like JPG, PNG, or PDF – in your Media Library so I can see it. Thanks.

  • Unknown's avatar
    axelware · Member ·

    @kathrynwp, let’s do it by parts:

    -Footer: I made it visible and I changed the color

    -Site title: I put one and paste “visibility: hidden”, I also replaced all the “display: none” I wrote for this line you provided and it works good, thanks.

    -Media resolution: The problem is that iPhone has a resolution of 1920×1080, iPad 2048 x 1536 and computer’s monitors goes from 1920×1080 to 4 or 5k, so I think it wont be possible to use a filter for screen size, isn’t it? correct me if I’m wrong.

    -CSS preview “buggy”:
    https://awbstudio.files.wordpress.com/2015/10/captura-de-pantalla-2015-10-07-a-las-1-32-31.png
    https://awbstudio.files.wordpress.com/2015/10/captura-de-pantalla-2015-10-07-a-las-1-33-29.png

    See how I have only changed the headings font size but the text in the page which is base font related (isn’t it?) changes as well.

    And this next two are about how I see in the preview and how it looks in the saved site:
    https://awbstudio.files.wordpress.com/2015/10/captura-de-pantalla-2015-10-07-a-las-1-31-27.png
    https://awbstudio.files.wordpress.com/2015/10/captura-de-pantalla-2015-10-07-a-las-1-32-10.png

    I have entered a title site as I told you, so it can’t be the problem anymore.
    I am gone to tweak the site description text position so if you are going to visit my site may be you’ll see it different from the capture screen I linked above.

    Thanks A LOT for your support!

  • kathrynwp · Staff ·

    Glad you got a few issues sorted.

    -CSS preview “buggy”:

    https://awbstudio.files.wordpress.com/2015/10/captura-de-pantalla-2015-10-07-a-las-1-33-29.png

    See how I have only changed the headings font size but the text in the page which is base font related (isn’t it?) changes as well.

    Thanks for the screenshots, that’s super helpful. I can replicate the issue and I’m going to report it to our developers so I can get it fixed up.

    Will look at second set of screenshots separately.

  • kathrynwp · Staff ·

    And this next two are about how I see in the preview and how it looks in the saved site:

    https://awbstudio.files.wordpress.com/2015/10/captura-de-pantalla-2015-10-07-a-las-1-32-10.png

    I have entered a title site as I told you, so it can’t be the problem anymore.

    Try adding this to your custom CSS to get the front end looking more like the Customizer preview:

    h1.site-title {
  margin-top: 1em;
}

    Let me know how it goes.

  • Unknown's avatar
    timofeysin · Member ·

    Hi,
    similar problem, changed the custom css, in preview i see that the background works, but on the website it.
    css preview
    view site

  • kathrynwp · Staff ·

    timofeysin – I think your problem is a different one. You’re currently in Custom Design trial mode, so some of your design changes can be previewed in the Customizer but not saved. Click “exit the preview” if you want to continue using the free customization features or click “Purchase to make it live” to buy one of the plans that include Custom Design (Premium or Business.)

    Customize gadland

  • Unknown's avatar
    timofeysin · Member ·

    ouu, thanks.

  • Unknown's avatar
    alex27pl · Member ·

    Hi there!

    I just wanted to let you know that font sizing issue in Customizer preview has been fixed. Changing headings font size now should not interfere with body font size.

    Thank you for your patience!

  • The topic ‘CSS preview "buggy"?’ is closed to new replies.