Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2017-01-29 21:19:01

RedFox
Member
From: Netherlands
Registered: 2005-03-25
Posts: 805
Website

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

#2 2017-01-29 22:10:12

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

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

#3 2017-01-30 06:49:57

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

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

#4 2017-01-30 09:38:29

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

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

#5 2017-01-30 11:40:23

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

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

#6 2017-01-30 13:28:41

RedFox
Member
From: Netherlands
Registered: 2005-03-25
Posts: 805
Website

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

#7 2017-01-30 15:31:00

RedFox
Member
From: Netherlands
Registered: 2005-03-25
Posts: 805
Website

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

#8 2017-01-30 19:37:33

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 2,071
Website Mastodon

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

#9 2017-01-31 17:12:03

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

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

#10 2019-02-11 16:58:43

jcr4runner
Member
From: Kissimmee, Florida
Registered: 2007-12-28
Posts: 18
Website

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

#11 2019-02-11 19:26:35

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,595
GitHub Twitter

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

Board footer

Powered by FluxBB