Hello everyone!
For a while now, I’ve been trying to get my order notifications styled according to the screen width, however, the CSS max-width seems not to be working. I hope someone can help me out!
@media screen (max-width: 550px){
.confirmation .body .center .order-summary .content .item .image,.confirmation .body .center .order-summary .content .item .summary{width:100%;}
.confirmation .body .center .order-summary .content .item .summary{margin:25px 0;}
}
@media screen (max-width: 480px){
.confirmation .body .bottom .content .left,.confirmation .body .bottom .content .right{width:100%;margin:9px 0;}
.confirmation .body .center .order-summary .content .order-details .right{width:100%;margin:25px 0;}
.confirmation .body .bottom .content .left .two-side,.confirmation .body .bottom .content .right .two-side{width:100%;margin:25px 0;}
}
This is what I currently use, the 100% width elements are 50% on larger screens, but should be full width on mobile devices, however, they still show up as 50% for devices smaller than 550px and 480px.
Hope someone can help me out!
Br,
Niek Uitenbos
Hi,
From the CSS, I don’t find any errors. Have you tried to add “!important” to force the width 100%?
If the same classes were used, it might not display correctly. Please try the “important” as below.
@media screen (max-width: 550px){
.confirmation .body .center .order-summary .content .item .image,
.confirmation .body .center .order-summary .content .item .summary {
width: 100% !important;
}
.confirmation .body .center .order-summary .content .item .summary {
margin: 25px 0;
}
}
@media screen (max-width: 480px){
.confirmation .body .bottom .content .left,
.confirmation .body .bottom .content .right {
width: 100% !important;
margin: 9px 0;
}
.confirmation .body .center .order-summary .content .order-details .right {
width: 100% !important;
margin: 25px 0;
}
.confirmation .body .bottom .content .left .two-side,
.confirmation .body .bottom .content .right .two-side {
width: 100% !important;
margin: 25px 0;
}
}
If you post the order notification liquid code here, it would be better to check the DOM structure or any conditions used for mobile.
Hope it helps.
Thanks.
Hey
Thanks for your reply. Also tried the !important tag, without succes.
Besides, I figured out external CSS-files are also not loading and scripts inside the notification are also skipped.
For now, I just edited the styling so it is clearly visible on all devices.
But just in case you or anyone has a solution, below the full template using. Removed the max-width styling in the meanwhile.
Br,
Niek Uitenbos
[
](https://www.hondenhoek.com/?utm_source=confirmation&utm_medium=email&utm_campaign=click_image&utm_id=8722)
# Bedankt, {{ customer.first_name }}!
Fijn dat u koos voor hondenhoek, dé online winkel voor hond en baasje.
We gaan direct aan de slag!
## Dit heeft u besteld
{% for line in subtotal_line_items %}
{% if line.image %}{% endif %}
{{ line.product.title }}
{{ line.variant.title }}
{% if line.final_line_price > 0 %}{{ line.final_line_price | money }}{% else %}€ 0,00{% endif %} per stuk
{% if line.quantity < line.quantity %}{% capture line_display %} {{ line.quantity }} of {{ line.quantity }} {% endcapture %}{% else %}{% assign line_display = line.quantity %}{% endif %}{{ line_display }} stuk(s)
{% endfor %}
Verzendkosten:
{{ shipping_price | money }}
Kortingen:
{{ discounts_savings | money }}
Totaalbedrag:
{{ total_price | money }}
U betaalde met {% assign transaction_count = transactions | size %}{% if transaction_count > 0 %}{% for transaction in transactions %}{% if transaction.status == "success" or transaction.status == "pending" %}{% if transaction.kind == "authorization" or transaction.kind == "sale" %}{% if transaction.payment_details.credit_card_company %}{% capture credit_card_url %}notifications/{{ transaction.payment_details.credit_card_company | downcase | replace: " ", "_" }}.png{% endcapture %}{% else %}{{ transaction.gateway | replace: "_", " " | capitalize }} {% endif %}{% endif %}{% endif %}{% endfor %}{% endif %} {{ data.order.payment }}
Bedankt voor uw betaling!
## Details over uw bestelling
Het bezorgadres:
{{ shipping_address | format_address }}
Het bezorgproces:
Wij zijn nu gestart met het verwerken van uw bestelling. Van zodra uw bestelling ingepakt is, ontvangt u hiervan een notificatie. Wanneer de bestelling in meerdere delen verzonden wordt, ontvangt u de bevestiging pas wanneer alle producten verzonden zijn, inclusief link voor het opvolgen. De momentele schatting is te leveren niet later dan {{ "now" | date: "%s" | plus : 1555200 | date: "%d %m %Y" }}. [Klik hier](https://www.hondenhoek.com/klantenservice/?utm_source=confirmation&utm_medium=email&utm_campaign=click_image&utm_id=8722) voor meer informatie.
Hulp bij vragen:
Heeft u nog verdere vragen over het verzendproces, de producten of over het gedrag of hygiëne van uw viervoeter? Op onze
[klantenservice pagina's](https://www.hondenhoek.com/klantenservice/?utm_source=confirmation&utm_medium=email&utm_campaign=click_image&utm_id=8722)
kunt u een heel aantal vaakgestelde vragen terugvinden.
[Lees hier](https://www.hondenhoek.com/pages/over-ons/?utm_source=confirmation&utm_medium=email&utm_campaign=click_image&utm_id=8722) meer over ons
en een kijkje in wie wij zijn. Tevens kunt u op onze
[Nieuws & Blog](https://www.hondenhoek.com/blogs/nieuws/?utm_source=confirmation&utm_medium=email&utm_campaign=click_image&utm_id=8722) veel interessante topics terugvinden!
[
Nieuw!
###
Exclusieve
kleding
Shop nu hondenhoek kleding
aan een scherpe prijs!
](https://www.hondenhoek.com/collections/hhk-kleding?ref=Homepage_duo)
**Hulp nodig?**
[Onze klantenservice](https://www.hondenhoek.com/pages/klantenservice/?utm_source=confirmation&utm_medium=email&utm_campaign=click_image&utm_id=8722) helpt u graag verder! Vermeld steeds uw bestelnummer: {{ order_name }}.
**Schrijf u vandaag nog in!**
Ontvang tips, kortingscodes en nieuwe producten in uw mailbox! [Klik hier](https://www.hondenhoek.com/pages/nieuwsbrief/?utm_source=confirmation&utm_medium=email&utm_campaign=click_image&utm_id=8722) en meld u vandaag nog aan.