Responsive View - Safari Browser on iPad

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.

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:
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

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!

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 edit file /templates/hot_startup/css/template_css.css and change all instances of ".hot_swipe_carousel_slides1" with ".hot_swipe_carousel_slides"

Regards

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!