Home Forums Weaver Xtreme Theme Min-height on 2 column content not working

Viewing 16 posts - 1 through 16 (of 19 total)
  • Author
    Posts
  • #17494
    booth1
    Participant

    Hi all,

    So again the site is still offline, but, I have created a page which has 2 column content. One side has an image the other side has text over grey. The problem I am having is that I cannot make the text column stretch to the bottom of the browser window. I have tried the “min-height:100%” to no effect unfortunately.
    I am adding the css to the actual page itself, and while everything else works great I just cannot get it to stretch to the bottom without filling it with content.
    The code I currently have in the page is:
    .content-2-col-left {padding-left: 50px; padding-right: 50px; padding-top: 20px; padding-bottom: 20px; background: #eceded; margin-left: -40px;margin-top: -20px;}
    like I said when I try and add “min-height:100%” to that nothing happens, same deal if I add it to just “.content”. adding a px value works fine but that isn’t going to work on different browsers and resolutions. Also I have ticked the box in theme options for “Full Browser Height”.

    Thanks scrambler for the initial coding a lot of which has made this site a lot easier.

    Appreciate any help.
    Cheers
    Tyrhone
    #20679
    scrambler
    Moderator

    It would really help if you could setup an online test site so we can see it all.

    Making something as tall as something else is not trivial and mostly impossible in CSS. This is why features like Flow color to the bottom that makes Sidebar and content as tall as the tallest, or Full browser height that extends the container area so the footer is at the bottom of the page, both use javascript.

    if you can setup a test site online, I can play with it to see if there is a CSS only workaround. If not I will try if I can setup a test page based on what you gave us, but I need to know more about what is in the page and what sets the height of the content area, and I need the whole code you have in the page content editor in text mode. You CSS with a negative does not make sense to me as is.

    #20680
    booth1
    Participant

    Thanks scrambler. What I have done to get to where I am is pretty convoluted but I will try set it up on my test site and see if it works. I think the complication comes in because I have used a 2 column split, moved the left column content over to one side and put a background image so that it looks like it is the other half of the page. But now making the column and/or content stretch is a pain in the ass!

    The content area height is currently just set by the text that is in it. so I can stick a load of spaces to make it reach the bottom, but then of course on a different browser you have a lot of dead space (although just thinking now I could use the “hide if mobile shortcode”).
    Thanks for your time mate.
    #20681
    scrambler
    Moderator

    You may want to create a picture of the page showing what it should look like to as we could try and reproduce that

    #20682
    booth1
    Participant

    Cool thank you scrambler. So attached is an image of the current issue. So the grey on the left hand side is the left column of a 2 column layout. I used the more tag after the text and left everything after the more tag blank so that the background image shows on the right. The left has a color background but it only goes as far as the content. I would like the color to go to the bottom of the page. (the thinner grey is just a part of the background image).

    Does that help at all?
    #20683
    booth1
    Participant

    Forgot the image! Here it is

    #20684
    scrambler
    Moderator

    I am still unclear. You say it is a two column layout, but I don’t see the left column, or is it what is extending under the text, and if so why is the second column covering the left one, as if we would be to make the second column as tall it would completely hide the left one??

    If This is the left column we see extending / under, what makes that column extend to the bottom.

    You need to clarify, and eventually paste the whole HTML you sue in that page content here

    #20685
    booth1
    Participant

    So the thin grey reaching to the bottom which you see on the left is not a column, it is a photoshopped part of the relay running background image, I did this to make the image fit better on the right habnd side. The actual left column is the wider grey box you see with text in it. The right column has nothing in it and therefore allows the background image to show through, giving the impression of an image on the right and a text column on the left (at least it gives that impression when the text box goes to the bottom of the page).

    How would I go about grabbing all the html for you? I have attached an image with part of the css I am using through the inspector.
    #20686
    Weaver
    Keymaster

    As @scrambler said in his very first answer, what you want to do is really impossible using CSS and HTML. Trust us on that one, because we literally spent days perfecting the appropriate JavaScript solution to make this full column background color thing work.

    That said, I think you can add some custom JavaScript to take advantage of Weaver Xtreme’s color flow code. It will also require adding a CSS ID (not a class) to each left column you want to do this for.

    Scrambler has played with that more than I have, so perhaps he can provide the code to add to the Post-Footer HTML insertion box.

    #20687
    scrambler
    Moderator

    I am sorry, but we are not communicating, we are stuck on your unsuccessful attempt instead of the goal.

    Is the goal to have two columns, one with text on the left that would have a variable height based on content, and an empty one on the right as high as whatever the left is where the background image shows to give the illusion of an image in that column.

    If this is what you want, Then there is a way to do that with an HTML structure like below

    <div style=”float:left;width:100%;background-image:url(Imageurl);background-size:contain;background-repeat:no-repeat;background-position:right;”>
    <div style=”float:left;width:50%;background-color:grey;”>All your text All your text All your text  </div>
    </div>

    It may need some tweaking on the background properties (like using cover instead of contain) based on the type of image used

    #20688
    booth1
    Participant

    Thanks guys, yep I don’t mind how I get it done (javascript) as long as I can do it! 🙂

    Thanks scrambler, I realize I am making things more difficult by not being able to link to the page so appreciate your efforts without it.
    That is what I want but using the HTML above is breaking things (maybe because of my existing code). I am pretty much dead on with what I want, it is purely not being able to get the left column with text content to reach to the bottom of the browser even if there is not enough content to push it there. Of course it is easy to give it say {min-height: 1000px;}, but that makes it too big on smaller browsers or devices.
    I am playing with just adding grey dots down the page which are hidden on mobile, it is not pretty and has a number of pitfalls, but if not possible even with javascript it will have to do. Any chance of doing it with weavers color flow and/or javascript?
    #20689
    scrambler
    Moderator

    Please try to create a test page from scratch without any of your stuff and just put the HTML I gave you.

    You can see it on a test site I use here

    Link removed (no longer valid)

    If you resize the browser, you will see the Text column gets bigger but the image always fill up to the bottom of the text columns. Let me know if that is what you were after.

    What weaver refered to is something that is different and probably wont do what you want if what I have above is, but once you have seen the test page and let us know we can discuss more

    #20690
    booth1
    Participant

    Hi Scrambler, sorry for the delay mate. So it is by no means a completed product and the page acts differently because of all the settings which changed things drastically (headers, widget area, menus etc etc). But I created a page with the same basic functionality as in the website I am creating.


    So the content column on the left in my website is attached to the top and I would like its background to stretch to the bottom of the browser (just color if no content), if the content takes it past the browser height then scrolling is fine. You can see that the background image will be covered on the left hand side which makes it look like a column, but actually the right column is just empty of content.

    I hope this helps a bit with what I am trying to do. I know browser height is a difficult one, but in reality I suppose I am just trying to make the content area stretch to the bottom, it just so happens that one column has a background color and the other is transparent. I hope you like puzzles! 🙂

    Appreciate you taking the time with this bud
    #20691
    scrambler
    Moderator

    If you want both image and text BG to extend to the bottom of the browser, then you are lucky I do like a puzzle and CSS has sometimes some miracles.

    Here is my test page (play with the browser size to see the responsive behavior)  Link removed (no longer valid)

    In the page check the option “Force Full Browser height”

    In the page content editor place just your text for the left column, no html

    In Main options > Fonts & Custom > Custom CSS Rule box put the rules below, replacing xxx by the page id #

    .page-id-xxx #container {position:relative;background-image:url(ImageUrl);background-size:cover;background-repeat:no-repeat;background-position:right;padding:0px;}
    .page-id-xxx #content {width:50%;position:absolute;height:100%;overflow:auto;}

    if you have Plus, you can put these rules in the editing page “per page style” box without the page id class

    #container {position:relative;background-image:url(ImageUrl);background-size:cover;background-repeat:no-repeat;background-position:right;padding:0px;}
    #content {width:50%;position:absolute;height:100%;overflow:auto;}

    The first rule is to put the background image on the container as this is the element made full height by the theme option. It also sets position relative so the next rule works.

    The second, limits the width of the content are to whatever width you need for the column, then positioned it absolute as the height 100% seems to work in that mode…It also sets the overflow to auto, so that if the browser is smaller than the text needs the first column will have a scroll bar.

    You can add a different background color for #content in the second rule if needed.

    I believe this is the best we can do

    #20692
    booth1
    Participant

    Holy sh!t, that works even better than I was hoping for, the scroll bar is a nice touch, I might see if I can style it to fit the site. I can’t thank you enough mate that just makes things work so much better. I am using pro so I put it in the per page styling.

    One thing though is that on mobile it still keeps the two columns which makes the column too thin. I tried putting a “.is-desktop” on the second rule but it broke it, and I tried putting in a second rule using “.is-mobile” but it doesn’t seem to want to work. You have already saved my ass with the columns I am hoping you might be able to figure this one out too?
    Your help makes this theme for me bro thank you!
    #20693
    scrambler
    Moderator

    If you are using the per page style box, you need to understand how to add the mobile class to rules there.

    When you use the per page style box, it adds the .page-id-xxx in front of the content of the box, So you cannot just add .is-desktop in front of the rule as it would create a rule

    .page-id-xxx .is-desktop #content…..

    Which is invalid, as the is-desktop class is at the same level as the page-id class so there must be no space between them

    So if you wanted to add a .is-desktop in front of the second rule in the per page style box, you would need to enter the following

    + .is-desktop.page-id-xxx #content {width:50%;position:absolute;height:100%;overflow:auto;}

    The + tells the theme to not add the page-id class, so you have to add it in the rule and attached to the is-desktop class


    But ultimately you need to explain what you want on mobile.

    If you do the above, what you will get is a regular content area with the Background image showing below/under it. Depending on what you want you may need some different rules.

Viewing 16 posts - 1 through 16 (of 19 total)
  • You must be logged in to reply to this topic.