Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 26, 2020 at 9:59 pm #1188281
    micha_media

    Hi, we built a new website. But some elements are displayed very bad in desktop view on iPad/Tablet portrait. We would like to switch them in mobile view on portrait. Could you help us and showing us the correct css code?

    1. .av-layout-grid-container should be displayed in mobile view on iPad portrait – each field in a single row

    2. The headlines (h3) in the Masonry-Galerie (which are laying permanently over the images) are to big for the small space in desktop view on tablet in portrait. How can we get the h3 smaller for a iPad/tablet in this element?

    3. We have a “article slider” on start page which shows 2 article side by side. How can we get them among each other for mobile view and iPad?

    Thanks for help!

    • This topic was modified 5 years, 4 months ago by micha_media.
    February 29, 2020 at 3:35 pm #1189024
    Mike

    Hey micha_media,
    Sorry for the late reply, I have examined your page and found with your grid row container (q:1) you are using two elements with the same ID, one with 1/2 columns and the other with 1/3 columns, so based on the Element Visibility options you have set you seem to want the 1/2 columns to show stacked for 768px (iPad/Tablet) if so Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top.home #wrap_all #kontaktelement_1.av-desktop-hide.av-small-hide.av-mini-hide .no_margin.av_one_half {
    width: 100% !important; 
    display: block !important; 
}
#top.home #wrap_all #kontaktelement_1.av-desktop-hide.av-small-hide.av-mini-hide .no_margin.av_one_half > .flex_cell_inner {
	    transform: translate(25%, 100%);
}

    After applying the css, Please clear your browser cache and check.
    For (q:2) please try this css:

    @media only screen and (min-width: 767px) and (max-width: 770px) { 
#top.page-id-123 #av-masonry-1 h3.av-masonry-entry-title.entry-title {
	    font-size: 20px!important;
}
}

    the font-size was set by your child theme to 26px, so 20px seems to work well, but feel free to adjust to suit.
    For (q:3) please enable the two articles for 768px so we can adjust.

    Best regards,
    Mike

    February 29, 2020 at 8:35 pm #1189064
    micha_media

    Hi Mike,

    thanks for your reply.

    For issue 3 I changed the article slider and enable it for 2 article. Please show me the code how I can display the articles among each other for mobile view and iPad?
    Please can you show me also a second solution: If I would like to use the article slider as a slider, – how can I display the arrows on the edge of the image. As things stand at present, the position of the arrows are depending on the devices: On tablet the arrows are on the image, on iPhone the arrows are on the headline.

    Thanks for help!
    Micha

    • This reply was modified 5 years, 4 months ago by micha_media.
    February 29, 2020 at 10:34 pm #1189108
    Mike

    Hi,
    Thank you for enabling 2 articles, but only one is loading on page load then when the next/prev buttons are clicked the second is loaded with jQuery, so we won’t be able to change this behavior with css.
    But to move the next/prev buttons up to the image for iPhone this css seems to work:

    @media only screen and (max-width: 767px) { 
	#top .avia-content-slider .avia-slideshow-arrows a {
    top: 20% !important; 
	}
}

    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

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