Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1359393

    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

    #1359399

    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

    #1359526

    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

    #1359545

    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

    #1359547

    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

    #1359560

    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, 4 months ago by Rikard.
    #1359660

    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

    #1360032

    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

    #1361223

    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

    #1361230

    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

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