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: 734
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
Moderator
From: Germany
Registered: 2005-01-20
Posts: 3,344
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: 7,107
Website

Re: How to make this image responsive?

doesn’t it also need height:auto;?


Yiannis
——————————
neme.org | hblack.net | LABS | State Machines | NeMe @ github

Offline

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

philwareham
Core designer
From: Farnham, Surrey, UK
Registered: 2009-06-11
Posts: 3,169
Website

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
Moderator
From: Germany
Registered: 2005-01-20
Posts: 3,344
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: 734
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: 734
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: 1,431
Website

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: 7,107
Website

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.org | hblack.net | LABS | State Machines | NeMe @ github

Offline

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

jcr4runner
Member
From: Kissimmee, Florida
Registered: 2007-12-28
Posts: 16
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.


The Real Jesus: A Defense of the Historicity and Divinity of Christ (DVD) http://therealjesus.com

Offline

Board footer

Powered by FluxBB