Skip to main content

Forums

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 73 total)
  • Author
    Posts
  • in reply to: FOUC Subsequent to Incorporating Critical.css #298199
    uxfed
    Participant

    I didn’t actually look last time but I’m not seeing a critical.css or critical_min.css file being served. I see what is likely a malformed attempt at it. Check how to use link tags at https://www.w3schools.com/CSS/css_howto.asp.

    As for the JS loader, you should be either starting it immediately (without the current wait) or get rid of it. It kinda just gets in the way otherwise.

    To your more general question, FOUC is bad and looks very unprofessional. FOUT (flash of unstyled text) can be okay if it’s not too jarring – I do that on some sites while fonts are loading.

    in reply to: Line and button placement on top of images #298143
    uxfed
    Participant

    I think I see what you’re trying to do with the line, but not the button. Anyway I think I’ve inferred enough to give you some starting advice.

    • What you’ve started doing with the position: absolute style is correct – you’ll need that to position your lines in the correct spots. One extra step you’ll need though is to set position: relative on the .thumbnail element. This says that the line will be absolutely positioned relative to the thumbnail element.
    • Then on the lines, set top and left styles. You’ll want to work in percentages rather than pixels to account for responsiveness.
    in reply to: Help troubleshooting css issue #298110
    uxfed
    Participant

    This code is the culprit. I’m not actually sure why it’s a problem though. I figured transforms off the page wouldn’t cause scroll issues – maybe it’s the 3d nature of it:

    [data-aos=fade-up-left] {
    transform: translate3d(100px,100px,0);
    }

    in reply to: FOUC Subsequent to Incorporating Critical.css #298107
    uxfed
    Participant

    There are two ways off the top of my head in which you could tackle this issue.

    1. (probably the easiest) You seem to already have a JS loader, where the content will show after fully loading, but said JS isn’t loading early enough, hence why you’re seeing the FOUC before the JS loader has… loaded.

    2. (what I would do) Get rid of the JS loader and amend your critical.css to include styles relating to everything “above the fold”. This means styles for all the content you see when you first load the page before scrolling. Anything below can load later.

    in reply to: Make only div scrollable when using transform scale #297979
    uxfed
    Participant

    Transform won’t work for zooming in the way you desire. You’d probably want to increase font-size when zooming. Its container should have overflow: auto; so a scroll bar will appear when there’s insufficient room for the content.

    in reply to: High Level Guidance on transitions and transforms #297956
    uxfed
    Participant

    I’m guessing you’ve done some more work to it because that’s not what’s happening now. It’s just including -left: 100px.

    I tried what I described last week by tweaking your codepen at the time and it works. You just needed to change the keyframes of moveContentRight so they’re the reverse of moveAndScale. The trick is the starting position of the second animation is the same as the end position of the first one so it won’t jump around.

    in reply to: High Level Guidance on transitions and transforms #297850
    uxfed
    Participant

    You could include animation: moveContentRight 1s forwards; as an inline style on image-container. Just make its keyframes a reverse of the left one.

    One thing you’ll also need to look at is how to get the image-container to line up with the left side of the screen. You might have to replace translateX with right: calc(100vw – whatever the image-container width is);.

    in reply to: High Level Guidance on transitions and transforms #297814
    uxfed
    Participant

    That’s a really good start!

    What I’d suggest is breaking this up a bit. So starting with the image-container content, it looks like in the dribble they have two blocks of content inside image-container, and as the image-container is transitioning across the page the content inside it is also transitioning in the other direction. So you won’t actually be “changing” the content inside image-container, instead you’ll be moving one block of content out, and another block of content in.

    For the width of the image-container iself, I’d use a CSS animation. It looks like you started doing this because you have “animation-name: moveAndScale;” in there. It’d be something like:

    @keyframes moveAndScale {

    0% {
    transform: scaleX(1);
    }

    50% {
    transform: scaleX(1.5);
    }

    100% {
    transform: scaleX(1);
    }
    }

    You’ll need to apply that animation directly to a separate element which contains the background though, because you don’t want to transform the text inside the block, only the background.

    in reply to: High Level Guidance on transitions and transforms #297665
    uxfed
    Participant

    A codepen with your progress would be useful, so we can see specifically where you’re having trouble.

    in reply to: FlexBox mobile and Desktop ordering Help! #295987
    uxfed
    Participant

    A code pen would really help here.

    in reply to: Linking to anchor tags within HTML #295115
    uxfed
    Participant

    I’m not actually seeing a problem. Some email providers may mess with the URLs you feed them, which is why the link looks different, but it seems to be redirecting correctly to the anchor link you started with.

    in reply to: Body Padding and Initial Caps #295114
    uxfed
    Participant

    Yeah that’s fine dustnik.

    1. I’m not actually seeing a problem. It’s a lot more noticeable if you bump up the amount of padding there but it’s applying all around the background element.

    2. I’d suggest using the style line-height: 1; on the style #workskin .cap

    in reply to: CSS BEGINNER NEED HELP WITH MOBILE STYLING #294847
    uxfed
    Participant

    I’d suggest either linking to the website or including a pen, as that’s very little to go on.

    uxfed
    Participant

    Check your styles. The span inside the a tags also has colour styles applied. Either change the span instead or (what I would do) set the span to color: inherit.

    in reply to: Multiple Body Page ID’s #294617
    uxfed
    Participant

    Paulie_D is correct. It’s far better to create a separate page template without the h1 and assign that template to whichever pages need the altered template. A CSS solution here is too fragile.

Viewing 15 posts - 1 through 15 (of 73 total)
icon-link icon-logo-star icon-search icon-star