Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 25, 2022 at 2:15 pm #1359393
    TakiwaSoulArt

    Hi,

    I would like some help with a somewhat difficult task.

    On some pages of this website I have shifted the page heading with -150px to the left, so that it extends into the opened circle or runs out of the circle – see screenshot 1.

    However, on small screens below 767 px, a line break happens between the columns – see screenshot 2. How can I program this to look the same on small screens as in screenshot 1?

    Thanks for the feedback and best regards, Sabine

    link to Dropbox and Website in private content

    July 25, 2022 at 4:54 pm #1359399
    Rikard

    Hey Sabine,

    Did you try adding different styles for different screen sizes? If not, then please try media queries like this:

    @media only screen and (min-width: 768px) {
  Styles for tablet and up goes here
}

@media only screen and (max-width: 767px) {
  Styles for mobile goes here
}

    Best regards,
    Rikard

    July 27, 2022 at 10:41 am #1359526
    TakiwaSoulArt

    Hi RIkard,

    this has nothing to do with the screen width. The smaller the screen, the faster the columns wrap and the effect that the headline comes out of the ring is gone. I just wanted to know if there is a code to change this.

    Sorry, I wrote heading instead of headline in the last mail …

    see pictures in the dropbox and the explanation in the first mail.

    Thanks and best regards, Sabine

    July 27, 2022 at 12:30 pm #1359545
    Rikard

    Hi,

    Thanks for the update. If you place the elements in the same column, then they should wrap together on mobile as well.

    Best regards,
    Rikard

    July 27, 2022 at 12:38 pm #1359547
    TakiwaSoulArt

    Hi Rikard,

    thanks for the feedback. But I don’t know how I can place them in the same column with this effect – I’m so sorry ….

    Best regards, Sabine

    July 27, 2022 at 2:59 pm #1359560
    Rikard

    Hi,

    You can try to place them in a text block element, then wrap them in span tags for example.

    Edit; you could also try to set the image as a background in a column.

    Best regards,
    Rikard

    • This reply was modified 2 years, 3 months ago by Rikard.
    July 28, 2022 at 10:55 am #1359660
    TakiwaSoulArt

    Hi Rikard,

    I’m sorry again – I didn’t do something like this and I think I use an external solution with Photoshop and set this as an image. It feels to complicated at the moment ;)

    Either they have another idea or they can close the item.

    Thanks a lot and best regards, Sabine

    July 31, 2022 at 11:36 pm #1360032
    Mike

    Hi,
    Thanks for your patience and screenshot, but unfortunately I can not find the page on your site for it, the link seems to be a 404 error now.
    Please link to the current page with the issue and perhaps a new screenshot so we can examine it.

    Best regards,
    Mike

    August 9, 2022 at 10:15 am #1361223
    TakiwaSoulArt

    Hi Mike,

    thank you for the mail. I found another solution and combined text and image with a graphic program to a new image. I used this image instead og text and image on the website. Perhaps I tried it another time.

    Greetings and you can close this topic,
    Sabine

    August 9, 2022 at 12:10 pm #1361230
    Mike

    Hi,
    Glad to hear that you have this sorted out, 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

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Headline with Minus-padding left in mobile view’ is closed to new replies.