Image-size in Welcome Area

  • Hi there,

    Am truly loving the theme. So thanks!

    In the Welcome Area I notice that when uploading an image ( http://www.jrdb.nl/ ) the resolution is a tad more blurry then I would like. Perhaps due to not using the correct size?

    I would like to make sure the size and resolution is just perfect. If you would be so kind to assist me with some tips…. thanks!

    @richard.boom

    You will need an image with higher resolution.

    At least 1600px wide.

    Thanks! That works! And even tried one which is 5000 and it nicely resizes!

    @richard.boom

    You don’t want to go too large because that will increase the size of the image, which means it will take longer to load.

    This will reduce the load time of your website.

    I recommend reducing the image down to 1600-1900px and saving it in lower quality.

    You won’t lose the quality of the image but it will be much smaller in size.

    thanks for that. What might the best width-size be? Based on the Projects-section would be perfect since then I might keep that same width.

    Just wondering….

    How is it that the image is not responsive (you only see part) on tablet or Iphone?

    I would recommend 1920px width. That will work on most desktops.

    As for the welcome area BG image, it takes up 100% of the height of that section. If we had it adjust like on desktops, it would cut off the text inside that section.

    Also, on mobile devices parallax effects don’t work too well so they are disabled.

    Hans. I was talking about the general Welcome-image and not the Parallax effect really.
    I use this big mozaique-image (www.jrdb.nl) and it is not responsive enough (my client feels).

    I also am wondering what the trim of the image is so I can take that into account. Somehow the top of the image seems to ‘slide under’ the top section with the title/logo/menu part.

    Hans? Might you have time to address my questions? If you need me to rephrase, please let me know!

    @richard.boom

    My apologies for the delay.

    You can use some custom CSS and a mobile media quiery to adjust the height and width of the welcome section on mobile devices. Currently it set to be 100% of the window height on mobile devices, but you can set it to be 100% width and auto adjust the height.

    If you go in the style.css file of the theme, at the bottom, there is a section for mobile device specific CSS code.

    The “trim” at the top is aprox 70px.

    Also, you will want to reduce the welcome image in size, it is very large and takes a few seconds to load. You can reduce it down to 1920px wide which will work with most screen sizes.

    Hope that answers your questions.

    nice. Will try that! Will google around for some CSS I can use.

    Last question of the day: the light-grey border around the image. Can I somehow make that transparant or white? The client likes a complete absence of color 🙂

    When you say “light-grey border” are you referring to the shadow effect at the top and bottom of the welcome image?

    If yes, you can comment that out in the style.css file.

    Here are the two CSS classes to look for,

    .navbar-default
    .hero

    Comment out

    drop-shadow: 0 -3px 6px 0 rgba(0, 0, 0, 0.4) inset

    I mean the shadow as well as the grey color 🙂 of the border itself. Thanks, I will venture into that CSS!

    This reply has been marked as private.

    Please provide me with login access and I will make the changes for you.

    This reply has been marked as private.

You must be logged in to reply to this topic.