Hi, I currently am struggling with making an image responsive.
It’s at : http://financeplus.bpr.nu/
and I’m testing Microthemer with the first image, the coffeemaker (Where the text says ‘Horeca’).
I tried -and succeeded- to make a white border around the image, but I can’t get it to ‘move’ with the resizing. It now displays a ‘static’ width at the different media sizes, but the right part keeps covering the text when resizing. Any hints?
You need to make two CSS adjustments in Microthemer to solve your issue.
Set the max-width property to 100% on the image
Set the margin to 0 on all sides.
When you’re working responsively, it’s a good idea to specify dimensions in % rather than pixels much of the time, although not necessarily exclusively. Fluid layouts (that use percentage widths) used in combination with a sprinkling of media queries produce the most flexible layouts that are easier to maintain. I talk about this more in our responsive tutorial.
Here’s a screenshot of how I prototyped which styles would solve your issue via Chrome’s inspector. Notice the max-width/margin styles highlighted in blue:
I hope that helps. Please let me know if you require further assistance.
Ok, thanks. That ‘almost’ seems to do the job, as I really want the margin (white around the pciture). So is there a way to set the ‘width’ to 100% MINUS 20px margin?…
(Isn’t it weird that the width goes beyond the borders anyway)
Already a second question : the team members are displayed at the page: http://financeplus.bpr.nu/het-team-van-finance-plus/
Since some have two lines of function, some one line, the’re not all aligned with eachother (the content blocks varie in height). Is it possible, to add css to make the ‘function’ box of each team member a certain height? I tried like for an hour now, and dit not succeed :(((
Sorry about the slow reply. In answer to your first question, you need to set padding rather than margin. Padding is the space between an element’s border and the content inside. Whereas margin is space outside the border. And so it is added to a width of 100%. Incidentally, so too is padding and border if the box-sizing property is set to ‘content-box‘ (the default). But on your site, the box-sizing property is set to ‘border-box‘, which means padding and border are included in the specified width. I explain this issue further in our CSS/Responsive tutorial: https://themeover.com/prepare-fluid-layout/
Are you still having problems with your second question? I see that the height of the boxes vary uniformly, rather than due to the length of text lines. And it seems like it might be a feature of the theme. Something controlled by JavaScript perhaps, which would make it tricky to override with CSS/Microthemer.
I’ll dive into problem 1,
but about 2:
It’s not uniform. Where a function is on one line, there’s a different height then when a function is in two lines (the extra line height is added)…. can you please check again?
(http://financeplus.bpr.nu/het-team-van-finance-plus/)
Linda; Salarisadministrateur (1 line)
Britt; Administratief medewerker & BTW-specialist (2 lines)
And about 1:
So I followed your suggested ‘Fluid’ tutorial, and first added a selector for box-sizing: ‘border-box’.
But nothing changed. Then I deleted the other CSS and Style adjustments I made in the theme. This works for a big part; I just can’t get the box the full height of the column (only way is to set position to ‘Absolute’) and have the image fill the whole box. I think the theme did this trick with (display:inline-block;) but when I add this manually it doesn’t work.
So:
– at desktop size the image has to fill in the whole area of the image (I can’t get it to cover the area)
– and at the smaller sizes it goes beyond the size of the image-box (? I can’t get it in the box)
can you please look into it? It’s the first image in the box ‘HORECA’ on the homepage (http://financeplus.bpr.nu). It’s really a hassle for me to get this working.
Again, sorry for the slow reply. I was away with in-laws in Poland over Easter and couldn’t get in much computer time. I’m back to normal work now though.
So with issue number 1, aligning the image with the height of the text, is this what you want?
I noticed that you had targeted the link (a) element that contains the image . You had applied height/min-height 100% to the link element. But the image still had a height: auto rule from the theme. And so wasn’t filling the full vertical space.
So you need to target the child image element rather than the link and set height:100% on the image. This should be possible by double-clicking the center of the image. If MT picks up the link again please let me know. You might also like to try out our 5.0 beta which makes targeting elements easier with hover/click.
With issue number 2, it’s quite hard for me to figure out how to target the right div elements using only Chrome’s CSS prototyping tools. Would you mind sending me login details to your site via this secure contact form?
Many thanks,
Sebastian
P.S if you want the image totally flush with the text you could remove your Microthemer padding/border styles e.g.
Thanks! We’re ALMOST there ;)…
Now, if i switch to smaller screensize / tablet mode / iphone mode (box height is adjusted) – check it out… the total image gets distorted!!! instead of showing 20% of the image, the whole image is pressed to 20%..
please tell me how this can be fixed…
aaaarghhhh! Now, suddenly all my selectors -except for image100 – are gone. That is, i see the (+) mark, but not a name anymore…
I managed to go to ‘restore’ Yeah.
But, auto doesn’t do the trick.
I’ll try to explain:
1)
If i resize from ‘all devices’ to large desktop, to desktop & tablet:
The WIDTH of the box decreases, and this messes up the photo – as the whole width tries to fit in the smaller box. It is compressed in the width. If it would be a picture of someone, he would have a funny face. That is no good.
2)
The box jumps to the top-section when it is at tablet / iphone size.
Now, the BOX size should be less in height, as it now takes up the 100% of the column.
There are 2 things/selectors:
a) The box where the image is in (with the 20px white border and – for you – marked with a blue line)
b) The image itself
How Can i fix part 1 (the photo not distorting)
and how to fix part 2…
please help ;)))
OK, if you want the image to be cropped rather than scale down with the size of the container, you can set an explicit width (e.g. 750px) and height (e.g. 525px) on the image. And then set overflow to hidden on the container link element. This may not look right to you either though.
Also, I would remove all of your absolute positioning styles (or disable them – hover over the ‘Position’ label for that option). It should be possible to solve this without the position property. Absolute positioning can be problematic in many cases, even for experienced CSS coders. Especially when designing responsively.
Hi Sebastian, I try to understand your options.
First: i set ‘overflow’ in my ‘testimage MT’ settings. (that’s the box, where the image is in)
Somehow, I cannot get it to have the height of the container it is in. No idea why there’s a 20px margin under it.
Then it is hardly adaptive. It’s a big mess.
I even installed the plugin adaptive images, but don’t know what i would have to do with it. It’s nowhere explained. So it doesn’t bring me a solution.
So, I also dived into the inidivual image (image 100 MT) to try all values, but it doesn’t help either. It keeps appearing distorted and not within the box.
Only thing is I would like to have a responsive image with a 20px padding, why is it so hard to do this?
(The other imageboxes are generated within the theme and pretty much do the trick, but they can’t be seen with a Chrome browser, otherwise I would go for that option)
Is there a way you can help me? I thoiught MT would come in handy with making things adaptive and so, but i’m lost here why this can’t be done.
I can understand your frustration. You’ve encountered some CSS property quirks that are harder to deal with than you would reasonably expect. I had forgotten that height:100% only works under certain conditions. Conditions which are not always desirable.
The Height:100% a & Padding issue
Setting an element to 100% the height of it’s container, requires that you set an explicit height in pixels (or other fixed units like ems) on the container. And also, set position to relative. This is so the child element can be given absolute positioning, a further measure which is needed for its height:100% rule to work.
This is annoying for a number of reasons. You probably don’t want to set an explicit height on the link element, as you don’t know how much vertical space the text on the right will take up. And you will need to change this fixed height on smaller screen sizes (via MTs responsive tabs). But this is a price you must pay for using this technique.
Another option is to experiment with flexbox CSS properties. This tutorial explains a technique relevant to your current issue. And here is a general guide to flexbox. You will need to add these properties via MTs custom code property group (the first one, to the left of the Font options). You should also note that flexbox isn’t support by IE10 and older versions of Chrome/Firefox/Safari: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
If you use the first technique, or the flexbox technique, you should be able to have the image at 100% the height of it’s container, and have padding.
The Distorted Image Issue
It seems that your difficulty in this task is worsened by the fact that you are trying to squeeze a naturally landscape image into an area of space that is more suited to a portrait image.
Also, responsive images normally work by having max-width:100% and height: auto. This means that the image height reduces in proportion to width, which is normally decreased at smaller screen sizes. It sounds like you want the image to maintain the same height even at different widths. But this must incorporate some distortion of the image. Though this may be less noticeable if you use a portrait image.
.
