Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #760142

    Hello
    Can you please have a look at his page, please?

    You see that we used a “one_third/two_third”-column.
    In the left column we putted a custom wigdet-area – in the right column an image.
    I made a screencast to show what i mean (the orange box should always have the same height than the image until it stacks above the image )
    https://drive.google.com/open?id=0BzF3a9LXV99JZE1PNjF6MkFYdkE

    I work on that since more then a day now and dont find a proper attempt.
    I thought it might be a way to change the ratio of the image and use a 1/4 – 3/4 column but that doesnt help either.

    Why doesnt “scales” the custom-widet area and how can that be done?
    If scaling of the orange box cant be done – what would be the right way make that work on smaller devices?
    Help would be very much appreciated.
    Kind regards Martin

    #760479

    Hey digitalprint2222,

    I don’t think it would be possible to get the left block and the image to always have the same height since the image scales, you would have to add it as a background to the element or stack it when the image starts scaling.

    Best regards,
    Rikard

    #760771

    Hi Rikard
    stacking when the images starts to scale doesnt work cause that would be on around 1200px and this much to early.

    Can you please tell me more about your other idea (“add it as a background to the element“)?

    Are there some other possible ways to get that done? (Would it be an idea to disable the scaling on the image?)

    And….
    here i set up a testpage for learning / research purposes:

    As you see its just a simple textbox & the image from Enfold – no interfereces with Ubermenu or other Plugis or so.
    Can you please tell me:
    Where in Enfold is the breakpoint defined that makes the textbox stack over the image?

    Kind Regards Martin

    #762134

    Hi Martin,

    The breakpoints are defined in grid.css, this one on line 85.

    You can try to make font scale and decrease line-height as the window scales.

    Let us know if you have any more questions.

    Best regards,
    Victoria

    #762214

    @rikkard
    Hi Rikard
    stacking when the images starts to scale doesnt work cause that would be on around 1200px and this much to early.
    Can you please tell me more about your other idea (“add it as a background to the element“)?

    @mods
    Are there some other possible ways to get that done? (Would it be an idea to disable the scaling on the image?)

    @victoria
    What question did you answered with this: “You can try to make font scale and decrease line-height as the window scales.
    Can you please concretise that ?

    Kind regards
    Martin

    #763358

    Hi Martin,

    Define a few more breakpoints and write font size and line height rules for them. Below is just an example:

    
    @media only screen and (max-width: 1070px) {
    .element {
        font-size: 16px;
        line-height: 22px;
    }
    
    @media only screen and (max-width: 860px) {
    .element {
        font-size: 14px;
        line-height: 18px;
    }
    

    But this is just the text part.

    Best regards,
    Victoria

    #763640

    @victoria
    there are more than 500 device-sizes out there.
    Adressing every single one of them by media-queries cant be a proper solution

    @rikkard
    Hi Rikard
    stacking when the images starts to scale doesnt work cause that would be on around 1200px and this much to early.
    Can you please tell me more about your other idea (“add it as a background to the element“)?

    @mods
    Are there some other possible ways to get that done? (Would it be an idea to disable the scaling on the image?)

    Martin

    #764070

    Hi digitalprint2222,

    I did not mean devices here, I meant screen width, and that is more or less unified, You can just identify a few (up to 4) breakpoints and structure you styles around them.

    Best regards,
    Victoria

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

You must be logged in to reply to this topic.