Hey all together,
I am just building our web-shop and have added a custom content on the product page. (Using Impulse theme)
It is a table with pictures and text in it. Also I changed the theme.css.liquid by setting a margin to 100px (margin: 100px !important; ) of this custom content section.
Now when displaying this section in mobile version this looks terrible.
Is there a possibility to set different code for mobile and desktop version? Or any other idea what I can do?
Picture of desktop version:
Picture of mobile version:
URL: https://lubale.de/collections/strampler-pyjama/products/pyjama_milchschnute
PW: nianod
Thanks already for your help!!
@hello_lubale
sorry for that issue can you try this code
- Go to Online Store->Theme->Edit code
- Asset->/theme.css ->paste below code at the bottom of the file.
@media only screen and (max-width: 768px) {
#shopify-section-template--15290903265449__16412393246d07b5ef {
margin: 0px!important;
}
}
@KetanKumar thanks so much!
It definitely looks much better, but the picture is still not perfect as well as our signature.
I think it is because I have managed the content inside a table.
Is it possible just to build another table and display only one table on desktop view and the other one on mobile view? Or would you do it completely different?
Thanks so much for your support!
@hello_lubale
can you please show me issue
hello @KetanKumar
Sorry, we changed the password.
It is again: nianod.
Here you can see the screenshot of mobile version.
It would be great if I can arrange the table in a way, that the picture in first column ist above and not on the left side.
Code of the table in html custom section:
|
<img data-mce-fragment="1" src="[https://cdn.shopify.com/s/files/1/0564/1263/5305/files/LLJ_2.jpg?v=1619647264](https://cdn.shopify.com/s/files/1/0564/1263/5305/files/LLJ_2.jpg?v=1619647264)" alt="Lubale Nachhaltigkeit"
|
Gemeinsam Handeln für die Welt unserer Kinder
Mit Lubalé wollen wir nicht nur super süße Mode kreieren, sondern dabei auch noch den Planeten schützen. Unsere Kleinsten werden noch lange nach uns über diese Erde gehen und wir möchten, dass sie den gleichen schönen Sonnenuntergang oder den Spaziergang durch grüne Wälder genießen können.
Mit jedem Teil von Lubalé sparen wir rund 150L Wasser und 120 Gramm CO2.
|
|
|
Juliana & Lucas
- Gründer von Lubalé -
|
<img data-mce-fragment="1" src="[https://cdn.shopify.com/s/files/1/0564/1263/5305/files/Unterschrift_Juliana_Lucas.png?v=1641289292](https://cdn.shopify.com/s/files/1/0564/1263/5305/files/Unterschrift_Juliana_Lucas.png?v=1641289292)" alt="Unterschrift Lucas und Juliana" width="90"
|
|
Thanks again!
1 Like
@hello_lubale
sorry that’s table code it not work top and bottom content you have change code table to div coding
Ok thanks!
Then we will go with this code for the beginning and change later.
1 Like
Hey thanks again for you support. This really looks good.
I am not sure whether I can do it my own. But will try to in the next days. Otherwise I will get back to you.
Best regards
Lucas
1 Like
@hello_lubale
yes, sure its my pleasure to help us any time
For everyone who are looking to add a feature which can make any section of any theme specific for mobile or desktop only, please follow the video tutorial.
