Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 30, 2018 at 7:55 pm #1028207
    info224

    Hi

    I would like to hide various images on both mobile and small tablet devices I can see how to do for mobiles, however, I’m unsure how to turn them off for the small tablet devices such as a mini iPad. Please see the example below.

    I want to keep the slider at the top of each page but hide the other images but keep the text. I had thought of maybe activating the element options for developers and naming them how that would be a lengthy process and I’m not sure what coding I would enable.

    Any ideas would be welcome.

    Thanks

    Alex

    November 1, 2018 at 6:31 am #1028711
    Rikard

    Hey info224,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 1024px) {
.page-id-4566 #av_section_1 {
  display:none;
}
}

    Best regards,
    Rikard

    November 2, 2018 at 12:53 pm #1029127
    info224

    Hi

    Unfortunately, it is not working. I also want to hide the images on all the pages for devices such as the mini iPad as they are side by side the text and they are not showing up that well on smaller devices (not unless you have another suggestion). As mentioned I thought of turning on the Show element options for developers and actually, I have. I thought if I named the images I did not want to show that might work better.

    Thanks

    Alex

    PS login detail is below

    November 2, 2018 at 4:40 pm #1029202
    info224

    Hi

    I have just spoken with the client. Currently, the images and text appear side by side on the PC and devices such as a mini iPad (with the exception of the phones), However, there is a lot of text in each section which means on the smaller devices the images are lost or distorted. Is there any way I can have the images for smaller devices on top of the text but side by side on the PC, please.

    Thanks

    Alex

    November 2, 2018 at 6:01 pm #1029248
    info224

    So essential I would like the following

    Hide image on mobile – this I can do
    Hide image on anything smaller 1024 px such as mini iPad (the above mentioned did not work)
    Ensure the images and text fit on anything bigger such as a laptop etc either by fitting side beside or image on top of the text. (turning the columns into rows I suppose)
    It works fine on a normal PC it’s just the bit in between that it does not.

    Thanks again and sorry to be a pain.

    November 3, 2018 at 7:47 pm #1029512
    info224

    Hi

    I would be grateful if someone could have a look at this issue.

    Thanks in advance.

    November 4, 2018 at 5:25 pm #1029639
    info224

    Hi

    I tried adding this coding

    @media only screen and (max-width: 1024px) {
    .alex { display: none !important; }}

    I’ve named the image alex and it hid it okay for below 1024 still working on anything above 1024

    November 5, 2018 at 3:36 pm #1029932
    Victoria

    Hi info224,

    You need to use the different pixel value to shide images on other screen sizes like

    
@media only screen and (max-width: 1100px) {
.alex { display: none !important; }}

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

    November 5, 2018 at 3:42 pm #1029936
    info224

    Hi

    Thanks for coming back I wasn’t wanting to hide the images on devices more than 1024 just make them fit better :)

    Thanks

    November 6, 2018 at 7:59 pm #1030543
    Victoria

    Hi info224,

    Best regards,
    Victoria

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