Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
How to make this image responsive?
Here is a codepen so you can experiment. I did try but didn’t succeed. Join me in this CSS puzzle.
Offline
Re: How to make this image responsive?
Try:
@media screen and (max-width: 800px) {
figure {
width: 100vw;
margin-left: calc( -1 * ( ( (100vw - 600px) / 2) + 16px) );
}
img {
width: 100%;
}
}
@media screen and (max-width:600px) {
.container {
width: 100vw;
margin: 0;
}
figure {
width: 100vw;
margin-left: -16px;
}
}
TXP Builders – finely-crafted code, design and txp
Offline
Re: How to make this image responsive?
doesn’t it also need height:auto;
?
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: How to make this image responsive?
Try this:
.container {
width: 80%; // or whatever dynamic width you want to use
background-color: #875500;
margin: 0 auto;
}
article {
font-size: 1.2rem;
color: #fff;
padding: 16px;
line-height: 1.4;
}
figure {
margin: 1em -16px;
}
// for if you use a `figcaption` tag
figcaption {
margin: 0.5em 16px;
}
img {
max-width: 100%;
}
Offline
Re: How to make this image responsive?
Although he wrote otherwise, I think Joop meant the image is 800px wide and the container 600px, i.e. wider than its container, otherwise it’s not a tricky problem.
Joop, you could also solve it by making your container wide and wrapping your text sections in a narrower inner wrapper, but not the image. That requires more markup but may be more robust for older browsers.
TXP Builders – finely-crafted code, design and txp
Offline
Re: How to make this image responsive?
@jacob … I know. That’s why I made it into a puzzle … ;-)
In a few minutes the (test)site is online. Your snippet has been used. And it’s working great … :)
Offline
Re: How to make this image responsive?
This is the site. It’s still under construction > margotnies.nl
[edit]
The site is ‘online’ (root) > margotnies.nl
Last edited by RedFox (2017-02-10 12:35:10)
Offline
Re: How to make this image responsive?
RedFox wrote #303733:
This is the site. It’s still under construction > margotnies.nl
what a great simple clean design! a pleasure on the eyes.
…. texted postive
Offline
Re: How to make this image responsive?
It actually does look great – I did not use google translation but I would love to see the recipes for those dishes:)
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: How to make this image responsive?
Forgive my ignorance on this Jacob.
I did a WRD for my blog in CSS. What bugs me is that all the images are very small on phones and other devices when enlarged.
Are you saying that I can just past your code into the CSS and all images will scale?
Or do I have to put code or tag each image as well?
Again, I know very little about CSS beyond making a few adjustments. Forgive my ignorance.
My published books on Lulu: http://lulu.com/spotlight/forerunner
Offline
Re: How to make this image responsive?
Try this into your CodePen demo:
.container {
width: 100%;
max-width: 600px;
margin: 0 auto;
background-color: #875500
}
article {
width: 100%;
color: #fff;
font-size: 1.2rem;
line-height: 1.4
}
article p {
padding: 16px 5% 0
}
article p:last-child {
padding-bottom: 48px
}
figure {
width: 100%;
margin: -32px 0
}
figure img {
display: block;
width: 100%;
height: auto;
vertical-align: top
}
Last edited by Pat64 (2019-02-11 19:29:10)
Patrick.
Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.
Offline
Pages: 1