Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1360789

    Hi,

    I would need a second help with Responsive customization. On the website (link in private content) there are 6 pages with offers. There is a row of 3 dots (01, 02, 03) following each offer. The dots are created as an image and adjusted in position so that they can be seen in the upper left corner of the column. (see screenshot in dropbox – link in private content).

    Below 767px screen width there are two problems:
    1. there is too little space between the columns, so the dots always protrude into the top column. How to change this
    2. the position of the images is different far left at 767px and at 464px, so the image is cut off (images in the dropbox).

    It concerns each of the 6 pages under the menu item ANGEBOTE.

    Thank you very much and best regards, Sabine

    Translated with http://www.DeepL.com/Translator (free version)

    #1360839

    Hey Sabine,

    The page you linked to results in a 404 error page, please check the URL.

    Best regards,
    Rikard

    #1360854

    Oh Rikard,

    a double error today – I’m sorry – it is the heatwave …

    The new link is in the private content.

    Best regards, Sabine

    #1360864

    Hi,

    Thanks for that. The page you linked to works, but the elements in your screenshots are not on the page. Could you link to where we can see the elements which are in your screenshots please?

    Best regards,
    Rikard

    #1360917

    Hi Rikard,

    the link of all 6 pages are in the private content and the screenshots are in the dropbox – link in the last private content

    Best regards, Sabine

    #1361035

    Hi,

    Thank you for the info.

    The css code below should adjust the position of the dots on smaller screens.

    @media only screen and (max-width: 768px) {
        .avia-image-container.av-67cea-136ddc8b145abc744c886b5819885f00, .avia-image-container.av-4hwii-ef140ae0612800d65a56956f82b14b3f, .avia-image-container.av-2ofye-558b2f838626b4d4afd94927f17a28e6{
            position: relative;
            top: -75px;
            left: -40px;
        }
    }

    We are using the unique class name of the image elements in the css rule above, but the class names can be replaced with custom ones if necessary. Please check this documentation.

    // https://kriesi.at/documentation/enfold/add-custom-css/

    Best regards,
    Ismael`

    #1361100

    Hi Ismael,

    I am sorry, the code doesn’t work. Even if I change the pixels, the points do not move.

    I created the CSS class “roundbutton” on one page (link in private content) and experimented with it – but even there the position of the dots below 767px screen width doesn’t change unfortunately.

    Are there any other possibilities?

    Many greetings, Sabine

    #1361590

    Hi,

    is it possible to have informations till monday?

    Thank you so much.

    Best regarsds, Sabine

    #1361604

    Hi,
    Thank you for your patience and the login to your site, so for the page linked below where you added the custom class roundbutton, I don’t find any css in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field or in your child theme ▸ style.css.
    It looks like you mostly add your custom css to the WordPress ▸ Customize ▸ Additional CSS field, which is good, but I don’t find the customization that Ismael recommended anywhere, so I assume that you have removed it. I see that instead of using custom css you are using the element Advanced ▸ Position ▸ Image Position, which is good.
    2022-08-13_001.jpg
    but please note that this was for the desktop resolution only, for the other sizes the position is using the same desktop position:
    2022-08-13_002.jpg
    so you will want to set each resolution size position option, for example for small screens (between 480px and 767px – eg: Tablet Portrait) I set it to top -40 & left -40
    2022-08-13_003.jpg
    and now the position is better:
    2022-08-13_004.jpg
    for the smallest screens you have the element hidden, so there is no need to set the position:
    2022-08-13_005.jpg
    and for medium sized screens (between 768px and 989px – eg: Tablet Landscape) the current desktop position seems to work fine, so there is no need to set the position:
    2022-08-13_006.jpg
    please clear your browser cache and check this page and if you find it working now please adjust your other pages accordingly.

    Best regards,
    Mike

    #1361691

    Hi Mike,

    thanks for the help, I now understood what it is all about and now I could also customize the round buttons on the smartphone. I had forgotten that I had turned them off for the smallest screen sizes … um. That’s why Ismael’s version couldn’t work at all. I had – I think – applesauce in my head that day. And I actually didn’t check that you can already set the image position directly on the image on all devices. I was surprised that there is no such thing ….. well, that was not my best day. But now everything works. Thanks again and enjoy the coffee :)

    You can close the topic – thanks

    Many greetings, Sabine

    #1361693

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Image position in mobile view’ is closed to new replies.