Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • August 8, 2016 at 3:08 pm #669845
    philthebass

    Hi,

    I’m in the process of building a new site with Enfold.

    I’m using a Full Width Easy Slider at the top of my page and have a colour section below that with a custom css class as follows

    /* approval images overlay */

    .approval_images {
    margin-top: -8%;

    }

    This works great on desktop (see grab)
    http://screencast.com/t/awDiWwEpjjP
    but I’m trying to get the two logos to scale down for mobile devices so that the positions stay relative to the text and button in each slide and don’t encroach on those elements like this
    http://screencast.com/t/OTOwC4Jh
    or push below eachother like this
    http://screencast.com/t/dMjofZ2vNye

    Thanks

    Phil

    August 9, 2016 at 8:55 am #670204
    Rikard

    Hi Phil,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    August 10, 2016 at 3:08 pm #670855
    philthebass

    Hi

    August 12, 2016 at 9:25 am #671767
    philthebass

    Hi Rikard,

    Have you had a chance to take a look at this yet?

    With thanks

    Regards

    Phil

    August 13, 2016 at 6:39 am #672196
    Ismael

    Hi,

    Use this code to decrease the size of the logo:

    @media only screen and (max-width: 767px) {
.approval_images .avia_image {
    width: 100px;
}
}

    Add a custom css class attribute to the image elements so that you can manipulate them separately. Could you please provide a screenshot of the mobile layout that you’re trying to accomplish?

    Best regards,
    Ismael

    August 13, 2016 at 11:34 am #672240
    philthebass

    Hey Ismael,

    Thanks for getting back to me. See grabs attached.

    With thanks

    Phil

    August 13, 2016 at 1:53 pm #672261
    Vinay

    Hi,

    The site looks a bit different from your screenshot. To align the FIA logo inline with SFI logo please enable the custom CSS class name and add class “move_down” to the FIA logo.

    http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    Feel free to adjust the bottom margin value as required by your site design.

    .move_down {
   margin-bottom:-25px;
}

    I looked for the other issues but could not notice anything as described please point us to the exact link where we can see the other issues.

    Best regards,
    Vinay

    • This reply was modified 8 years, 3 months ago by Vinay.
    August 13, 2016 at 1:57 pm #672264
    philthebass

    Thanks Vinay but I I already have a class assigned to that image .approval images

    @media only screen and (max-width: 767px) {
    .approval_images .avia_image {
    width: 100px;
    }
    }

    August 17, 2016 at 5:06 am #673466
    Ismael

    Hi,

    We checked the slider today and the layout is different. Did you change it?

    Best regards,
    Ismael

    August 17, 2016 at 9:21 am #673577
    philthebass

    Hi Ismael,

    Apologies. I was going to email you yesterday. I think I was expecting too much from the simple slider so we’ve built a separate LayerSlider which works great.

    Thanks for you help.

    Regards

    Phil

    August 18, 2016 at 6:43 am #674045
    Rikard

    Hi Phil,

    Ok great, glad you found a solution :-)

    Please open a new thread if you should have any further questions or problems.

    Thanks,
    Rikard

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Scaling images’ is closed to new replies.