Skip to main content

Forums

This topic contains 9 replies, has 0 voices, and was last updated by  StephBertha 7 years, 3 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #38864

    StephBertha
    Participant

    Hi there,

    I seem to be having a hard time getting this coded correctly. Here’s the layout I’m working with:
    http://www.gotmedia.org/layout-css-help.jpg

    I have everything coded and working, except for the portion in red. I have the div floating right and the transparent background hugging the edge of the browser beautifully, but the text won’t move with the browser. It stays in place.

    I used percentages thinking that would solve it, but I’m missing something. Can anyone give me a clue? I would post my code up here, but it’s quite long right now and I’m on the clock, so I just wanted to see if anybody knew something right away.

    I appreciate your help,
    Steph

    #105975

    i3iorn
    Member

    I’m happy to read code. Because right now its hard to tell. To little information is just as bad as to much.

    #105990

    simoncmason
    Member

    When you say the text won’t move with the browser, do you mean if you resize the browser window the text stays in place and you get a horizontal scroll bar?

    If so then you probably have a fixed width – i.e. set in pixels somewhere or perhaps a form with a too many columns to scale down?

    Anyway without seeing the code as @i3iorn says above it is pretty much impossible to help you out.

    #106040

    StephBertha
    Participant

    This reply has been reported for inappropriate content.

    When you say the text won’t move with the browser, do you mean if you resize the browser window the text stays in place and you get a horizontal scroll bar?
    Yes.

    The only fixed width I have is on that background pattern repeating because if I do it at 100% it’s cut off, it doesn’t actually go 100% :(

    Do you know of any examples that have been done before?

    #106041

    simoncmason
    Member

    So the div within the red border on your picture has a width set in pixels? If so that will stop your site being properly fluid / responsive.

    Really need to see the code to be more help Steph, paste it on to a codepen and throw us a link!

    #106043

    StephBertha
    Participant

    This reply has been reported for inappropriate content.

    I appreciate your help. I’ll definitely do that next chance I get, thank you!

    #106045

    StephBertha
    Participant

    This reply has been reported for inappropriate content.

    Hi there,

    I tried posting the code on codepen, but the text wasn’t showing up (probably had something to do with the JS), so I posted it on my website:

    http://www.gotmedia.org/layout-css-help/

    Quite a stumper this one!

    #106049

    wolfcry911
    Participant

    Steph, a link to a live a page is always best! I’d take that over codepen, jsfiddle, or any other test bed any day – thanks.

    Now to solve your problem:
    remove the width from section#supporting-panels;
    remove the width from #controls-wrapper;
    remove the width from #slidecaptionright;
    adjust padding in #controls-wrapper to get 20px instead of the current 40px

    #106098

    StephBertha
    Participant

    This reply has been reported for inappropriate content.

    Sure, I’ll work on getting my code into places like that (for the future).

    Thank you, wolfcry, for your help — that worked!

    #106100

    wolfcry911
    Participant

    Perhaps you misunderstood – I was thanking you for posting a link to a live page instead of using one of the popular test beds. I know I’m in the minority, but I find it so much easier to debug.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star