Adaptive

Hey pddcoms,

Can you give us a link to the page in the screenshot? so we can check and give you a css code that should help.

Best regards,
Nikko

Hi,

1. I believe this is fixed?
2. Put it inside a section so the top alignment is the same.
3. It seems the image itself has large white space (example in private content), try to reduce those extra white space.
4. Caption does work, there’s a Caption tab when you use Image module, however it displays at the center of the image.

Best regards,
Nikko

Hi,

Yes, have those columns put inside a section so they align properly. Let me know if I have misunderstood it.

Best regards,
Nikko

Hi,

Can you give us a single page that we can use as reference (just one of the list of pages you posted previously), also please post us your login credentials (in the “private data” field), so we can take a look at your backend.

1. Install and activate ” Temporary Login Without Password “.
2. Go to ” Users > Temporary Logins ” on the left-side menu.
3. Click ” Create New “.
4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
   ( do be sure that we have enough time to debug ).
5. Click ” Submit “.
6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

When your issue is fixed, you can always remove the plugin!
If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.

Best regards,
Nikko

Hi,

Thanks for providing the admin access, I have removed the whitespace, removed the bottom padding on the 2nd and 3rd title, and added this css code in Quick CSS for the 1st slider:

.avia-slideshow.avia-slideshow-1 {
    margin-top: 3px !important;
    margin-bottom: 5px !important;
}

so it has the same top and bottom margin as the other 2 sliders, added a custom class for the textbox and called it mytext, then added this in Quick CSS:

.av_textblock_section .mytext {
    min-height: 90px;
}

Let us know if you need further assistance. :)

Best regards,
Nikko

Hi,

Yes, it’s aligned on my monitor, I have adjusted the code so it looks more aligned:

.av_textblock_section .mytext,
.mygrid section.av_textblock_section {
    min-height: 120px;
}

@media only screen and (max-width:1400px) {
  .av_textblock_section .mytext,
  .mygrid section.av_textblock_section {
    min-height: 160px;
  }
}

@media only screen and (max-width:1200px) {
  .av_textblock_section .mytext,
  .mygrid section.av_textblock_section {
    min-height: 200px;
  }
}

@media only screen and (max-width:1024px) {
  .av_textblock_section .mytext,
  .mygrid section.av_textblock_section {
    min-height: 230px;
  }
}

However, this solution isn’t the perfect fix since the narrower the screens, the more it wouldn’t be aligned. The only solution I could think of is to use 1 grid row for the 3 headings/title, 1 grid row for the 3 sliders, etc, then in Screen Settings hide it on mobile, then for the mobile version, use 3 single column with each column having the heading, slider, etc. Hope this helps.

Best regards,
Nikko

Hi,

Try using this css code for that:

.av_textblock_section .avia_textblock {
    word-wrap: break-word;
}

Hope it helps.

Best regards,
Nikko

Hi pddcoms,

Yes, you can always make more adjustments to suit your needs. Can you point out the remaining issues, better with screenshots and links to the pages?

Best regards,
Victoria

Hi,

Actually the web doesn’t have those standards, you just need to test it on other screen resolutions and make adjustments based on it. Maybe these media queries might help:

Hope this helps.

Best regards,
Nikko