https://gyazo.com/5879a8f4528bcfb7bc5c8b5cd3f72dd1
The images displayed above are screenshots from different devices - one from my iPhone and the other from my computer on Chrome.
https://gyazo.com/5c4ac3d0cef9b63a92f2649d8e00adba
I have included the relevant CSS and HTML code for reference:
The CSS code can be viewed here:
https://github.com/oskaryil/dev-cafes/blob/master/public/assets/css/main.css#L40-L233
The HTML code is as follows:
<section class="header">
<div class="nav">
<div class="nav-left">
<a href="#" class="nav-title">Dev Cafés</a>
<a class="nav-location" href="#">
<i class="fa fa-map-marker" aria-hidden="true"></i>
Stockholm
</a>
</div>
<div class="nav-right">
<a class="nav-add">
<i class="fa fa-plus" aria-hidden="true"></i>
Add
</a>
</div>
</div>
</section>
<!-- focus from here -->
<section class="main">
<div class="cards">
<ul class="cards-list">
{{#each venues}}
<li class="cards-list-item">
<a href="#" class="cards-link">
<div class="cards-header-info">
<div class="cards-header">
{{#if image}}
<img class="blur" src="{{image}}" />
{{else}}
<div class="cards-header-bg">
</div>
{{/if}}
<p class="cards-header-p">
{{name}}, {{adress}}
</p>
</div>
<!-- to here -->
<div class="cards-info">
<p>
{{description}}
</p>
{{#if options.wifi}}
<i class="fa fa-wifi availability-icon" data-option="on" aria-hidden="true"></i>
{{else}}
<i class="fa fa-wifi availability-icon" data-option="off" aria-hidden="true"></i>
{{/if}}
{{#if options.toilet}}
<svg version="1.1" class="toilet-icon availability-icon" y="0" x="0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" data-option="on">
<g>
<g>
...
[SVG path continues]
...
</g>
</g>
<g>
<g>
...
[SVG circle element]
...
</g>
</g>
...
[Additional SVG elements]
...
</svg>
{{else}}
<svg version="1.1" class="toilet-icon availability-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" data-option="off">
<g>
<g>
...
[Similar SVG path continuation]
...
</g>
</g>
</svg>
{{/if}}
</div>
</div>
</a>
</li>
{{/each}}
</ul>
</div>
</section>
JSON object with data that gets sent to handlebars:
module.exports = [
{
name: 'Starbucks Stureplan',
adress: 'Kungsgatan 2',
description: 'Very nice place with good drinks and good wifi with nice service.',
options: {
wifi: true,
toilet: true
},
//this is the image
image: "https://s-media-cache-ak0.pinimg.com/originals/8f/5f/d0/8f5fd07d1034e0d4941c4ad9d58ec055.jpg"
},
{
name: 'Starbucks Fenix',
adress: 'Kungsgatan 2',
description: 'Very nice place with good drinks and good wifi with nice service.',
options: {
wifi: true,
toilet: true
}
}
]
Please note that this project follows a mobile-first approach:
If any display issues arise due to the placement of the images, you may adjust the margin-top property in the "main" section. However, this may cause some positioning discrepancies on certain devices.
If removing the picture entirely resolves the problem, it might be a viable solution. Keep in mind that using images within handlebars templates requires careful handling to ensure proper display across various devices.
If you encounter difficulties understanding the source of this issue, further debugging or testing may be necessary to pinpoint the root cause.