Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 6, 2018 at 4:22 pm #922393
    rosewoodva

    Hi There,

    I am working on this website, but it applies to all websites I’m creating. I notice there is always an akward in between stage between the website looking great on desktop, then when shrinking the window it looks good, then looks terrible, then switches to mobile/tablet view.

    How can I limit the awkward in-between phase between desktop and responsive? Site is in Coming Soon mode, you’ll need to log in, credentials included below.

    • This topic was modified 6 years, 9 months ago by Rikard.
    March 7, 2018 at 5:37 am #922733
    Rikard

    Hey Deanna,

    Thanks for the login details, though I think you need to be a bit more specific as to what you want to change and on which resolutions. Maybe screenshots highlighting the problems?

    Best regards,
    Rikard

    March 7, 2018 at 11:55 pm #923462
    rosewoodva

    Hi Rikard,

    Please see link for images. The contact page – their email addresses overlap columns in any size screen.

    The issue happens between desktop and mobile formatting. If you shrink your browser screen, you’ll see the issue happening right before it switches to the mobile/tablet size layout.

    Images on the homepage with captions – text overlaps right before it changes to mobile version. Can we make it go to a tablet layout for larger screens?

    • This reply was modified 6 years, 9 months ago by rosewoodva.
    March 8, 2018 at 10:05 am #923686
    Victoria

    Hi rosewoodva,

    The testimonials slider can be made a bit better with this code:

    
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
      padding: 0px 20px;
  }
  .responsive #av_section_2 .container {
      max-width: 95%;
  }
  .avia-image-container.avia-align-center .avia-image-container-inner {
    display: block;
  }
  #av_section_2 div .av_one_half {
    margin-left: 6%;
    width: 90%;
}
  #av_section_2 div .av_one_half .avia_image {
    min-height: 250px;
      width: auto;
  }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    March 8, 2018 at 4:43 pm #923942
    rosewoodva

    Hi Victoria,

    I was not looking to change the testimonial slider on the homepage.

    The issue is with the two images with caption overlays below the testimonial slider – please see the link to screen shots that I attached to the last reply.

    -Deanna

    March 9, 2018 at 8:12 pm #924692
    Basilis

    Hi,

    Here is the link
    https://s.nimbus.everhelper.me/share/1538991/node5yem7zu8n9xo6rvh

    Let us know what is the issue exactly, I do not see any overlapping.

    Best regards,
    Basilis

    March 9, 2018 at 8:33 pm #924711
    rosewoodva

    Hi guys,

    Your support is normally fantastic, but we’re missing the mark here. I have let you know the exact issue 3 times.

    Please look at the screen shots in this link to see what I’m talking about: https://imgur.com/a/4wPmL
    – 1st image: email address overlapping columns in 1/4 column layout on contact screen (all screen sizes)
    – last image shows the sizing issues for the images with captions overlayed (homepage, smaller desktop/laptop sizes only)

    The formatting of the elements below looks bad between mobile size and desktop size. So people with smaller screens see these issues. My client is using a screen size of 1366 x 768. Is there a way to make the transition to @mobile happen at a larger screen size?

    Please help.

    March 14, 2018 at 5:52 am #926405
    Ismael

    Hi,

    Thank you for the info.

    We added this code in the Quick CSS field to adjust the top and bottom padding, font size, line height of the caption container.

    @media only screen and (max-width: 767px) {
	.av-image-caption-overlay-center {
    padding: 50px 20px;
    font-size: 12px !important;
    line-height: 1.3em;
	}
}

    Please remove browser cache or do a hard refresh before checking the page.

    Best regards,
    Ismael

    March 14, 2018 at 6:07 pm #926746
    rosewoodva

    Thanks Ismael,

    That seems to work for the homepage.

    However I am still having the issue on the Contact page where the 1/4 columns text is overlapping at all screen sizes: https://imgur.com/a/DynkS

    Contact

    March 16, 2018 at 4:27 am #927879
    Ismael

    Hi,

    We can break the rest of the email address to the second line.

    a[href~=mailto] {
    word-break: break-word;
}

    Best regards,
    Ismael

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