Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 13, 2017 at 5:53 pm #760142
    digitalprint2222

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

    Druckvorstufe

    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

    March 14, 2017 at 7:33 am #760479
    Rikard

    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

    March 14, 2017 at 3:33 pm #760771
    digitalprint2222

    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:

    testpage-responsiveness

    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

    March 16, 2017 at 7:41 pm #762134
    Victoria

    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

    March 16, 2017 at 9:19 pm #762214
    digitalprint2222

    @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

    March 19, 2017 at 10:26 pm #763358
    Victoria

    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

    March 20, 2017 at 1:53 pm #763640
    digitalprint2222

    @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

    March 21, 2017 at 9:16 am #764070
    Victoria

    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

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