HTML & CSS - online shop header top line - make it differently for desktop and mobile

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • lenahotelultra
    New Member
    • Jan 2022
    • 1

    HTML & CSS - online shop header top line - make it differently for desktop and mobile

    Dear people :)

    I just have super basic coding skills and our shop software partner is bad for people who are bad in coding, so I need your help to do some changes in the header top line in our online shop please!

    I want do do this headline differently for mobile and desktop, so that the headline is in one line by using desktop and in two lines by using mobile.

    In our shop backend I have a field where I can fill in the HTML code to create this headline.
    In our shop templates I have this one file in which the CSS is defined.

    Our shop software partner told me:
    "You have to change the content of the field in the shop backend accordingly. The CSS classes available for this are all available in the file styles.css."

    But I have no idea what to do now in this HTML field in our shop backend.

    I want it like this:

    Desktop:
    Kostenloser Versand ab 50€ in DE | 10% Neukundenrabatt mit dem Code: CHECK-IN

    Mobile:
    Kostenloser Versand ab 50€ in DE
    10% Neukundenrabatt mit dem Code: CHECK-IN

    Here some Screenshots:

    https://ibb.co/GR1kn9W
    https://ibb.co/Rgttqqk
    https://ibb.co/B47Rwvx

    In case you need the whole styles.css file:

    https://www.dropbox.com/s/kej5jg4976q2dqj/styles.css?dl=0

    Can you help me? :)

    Thanks a lot in advance!

    Best wishes
    Lena
  • dev7060
    Recognized Expert Contributor
    • Mar 2017
    • 656

    #2
    Dear people :)

    I just have super basic coding skills and our shop software partner is bad for people who are bad in coding, so I need your help to do some changes in the header top line in our online shop please!

    I want do do this headline differently for mobile and desktop, so that the headline is in one line by using desktop and in two lines by using mobile.

    In our shop backend I have a field where I can fill in the HTML code to create this headline.
    In our shop templates I have this one file in which the CSS is defined.

    Our shop software partner told me:
    "You have to change the content of the field in the shop backend accordingly. The CSS classes available for this are all available in the file styles.css."

    But I have no idea what to do now in this HTML field in our shop backend.

    I want it like this:

    Desktop:
    Kostenloser Versand ab 50€ in DE | 10% Neukundenrabatt mit dem Code: CHECK-IN

    Mobile:
    Kostenloser Versand ab 50€ in DE
    10% Neukundenrabatt mit dem Code: CHECK-IN

    Here some Screenshots:


    Image shop-backend-html-field hosted on ImgBB



    In case you need the whole styles.css file:



    Can you help me? :)

    Thanks a lot in advance!

    Best wishes
    Lena
    Post the code and screenshots here. Show what you have done so far.

    Comment

    Working...