Responsive View - Safari Browser on iPad

More
3 years 9 months ago #46324 by madmax24
Hello,
I am using the HotStart up design. The Hot Swipe Carousel responsive view that displays on the iPad is not properly showing the images. The text is very large and either overlaps or cuts off. I read in a different post about adding the following to the the css file:

.flickity-viewport{
min-height: 694px;
}

I did make the change but it did not resolve the issue. Please advise. Website url: leadingtechnologyadvisors.com

Thank you.

Please Log in or Create an account to join the conversation.

More
3 years 9 months ago - 3 years 9 months ago #46325 by milos
Hello,

You can set different style for carousel text for smaller screens using media queries. In example, for screens of 768px and smaller, use this:
@media (max-width:768px) {
  .hot_swipe_carousel_slides .contents {
    top:25px;
  }
  .hot_swipe_carousel_slides .contents h2 {
    font-size:18px;
  }
}

The above code will reduce font size and move text more to the top. You can experiment with different values and screen sizes.

Regards,
Milos
Last edit: 3 years 9 months ago by milos.

Please Log in or Create an account to join the conversation.

More
3 years 9 months ago #46327 by madmax24
Milos,

I have adjusted the css files with varying sizes, however, I did not see any of the changes reflected. (I cleared system cache.) When viewing the site on a tablet or laptop the letters are too low and being cut off. (See attached) There is also a wide gap between the carousel and the following ADV module positions. The view on the iPhone does not display any wording on the images. I ended leaving the settings are they were originally.

The HOT Startup Demo displays perfectly on various screen sizes, there is also no gab between the carousel and ADV1 2 & 3 module positions. This is exactly how I need my site to display. Can you please advise how to achieve this exact effect?

URL: leadingtechnologyadvisors.com

Appreciate it!
Attachments:

Please Log in or Create an account to join the conversation.

More
3 years 9 months ago #46329 by milos
In your media queries, you are targeting classes .hot_swipe_carousel_slides1 and .hot_swipe_carousel_slides2. Your carousel has class .hot_swipe_carousel_slides

So, adding the css code is pointless if you miss the target. I recommend you to learn how to use Chrome Developer Tools or Mozilla Firebug. It will save a lot of your time.

Thanks

Please Log in or Create an account to join the conversation.

More
3 years 9 months ago #46345 by milos
Please edit file /templates/hot_startup/css/template_css.css and change all instances of ".hot_swipe_carousel_slides1" with ".hot_swipe_carousel_slides"

Regards

Please Log in or Create an account to join the conversation.

More
3 years 8 months ago #46372 by madmax24
Thank you for the instructions. I did as you said to and it helped, however, the display still is not quite right. Do I need to change ".hot_swipe_carousel_slides2" also? The logo also displays very small. How/where do I adjust this?

I have attached an image for you to view. Thank you!
Attachments:

Please Log in or Create an account to join the conversation.

Moderators: milos
Time to create page: 0.105 seconds