Some glitches to be solved

Hi,
I've finally got my site online, but there're are some issues for which I cannot find the solution.
Firstly, The logo, i've placed in the header is'nt centered when I watch it on my mobile.

secondly, I've used some big images as separators for in between chapters. Right now they are set as backround images for a section.
Sadly that makes them non-responsive, en increase the loading time on mobile web. (It looks a bit strange too, because you can only see a smaal part of the image.

Is there way of solving these 2 issues?

The url is www.lemasdenhaut.nl/test

thanx?

www

Comments

  • Hi,

    1. Logo is not centered, because is too big for mobile devices. Below css will do the trick in this case only:
    @media only screen and (max-width: 479px) {
        #Top_bar .logo #logo {
            padding: 0;
            width: 260px !important;
        }
    }
    2. To make images responsive, you must always use class="scale-with-grid".
  • Oh, and forgot another issue.

    I've loaded some images in gallery's inside tabs. These images are ment to be square, but are not loading right on mobile. is there a solution for that as well?
  • It's because of old theme version you use. With recent theme version gallery display properly on mobile devices.
  • Thanks!
  • Logo is fine now, thanks a lot!

    but the scale-wth-grid class. How and where exactly can i do this?

    I tried to put class="scale-with-grid" in the custom class field of the section, but that does'nt really work. Also tried just filling in: "scale-with-grid" and scale-with-grid but that does'nt work either...
  • It depends where you want to do this. If you will send us url to page where you did it and tell us where you exactly used this class, we can check if you did it properly.
  • Oké. That would be nice. The url is www.lemasdenhaut.nl/test

    regards,
    Jur
  • Ok. Please use below css and this should help you a lot:
    .shadowbox4links {
        max-width: 100%;
        box-sizing: border-box;
    }
  • Thanx for your reply!

    Done that, but that line doesn't adress the "tussenbanner sections" wich are the images I want to scale for use on mobile devices. Right now they're loading on a 100% on mobile devices. But I'm looking for a way to scale those in order to reduce loading times and improve the look on mobile devices?
    I've tried to use the scale-with-grid class, but it doesn't seem to do anything right now?


    thmks,
    Jur
  • Or would it be an idea to clone those sections with smaller images and toggle between the visibility (e.g. Hide the smaller sections on desktop and the large ones on mobile?)
  • If this is not what you are looking for, you can use different sections with different images on mobile devices. When you create section, you have option to select on what devices section should be visible and this is probably the only way to do what you want.
  • That's what I meant, think i'll do that....

    thnx!
  • Thanx for all the support! It's allmost done. One more thing:
    The client say's that in Internet explorer the site does'nt work well. Images that are too large?
    Is there something I can do about this?

    regards,
    Jur
  • Is your client talking about IE8?
  • I don't know. I'll ask...
    Does that matter?

  • Yes, that matter and is very important.
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.