fix position for image at bottom border

…especially with responsive design, i really have no clue how to handle!

Hi,
we are coming closer :)
i’ve put the code now as follows in the quick css (without 1px border):

.page-id-673 .av_two_fifth {
vertical-align: bottom !important;
}

but what i would like to achieve is the result as you can see in this picture:

therfore i’ve put the code in custom.css in the desktop style section

.page-id-673 .avia-builder-el-no-sibling {
    margin-bottom: -50px;
}

as you can see in the screenshot marked, it gets overruled by shortcode.css (i’ve changed it manually to -50px, so you can see what i would like to achive).

Yeahaw, it works! Thanks!

… in the meanwile i’ve tried to change an other page as well, but it doesn’t work.

Please check my code what i did wrong there.

.page-id-617 .av_one_third {
vertical-align: bottom !important;
}
.page-id-617 .avia-builder-el-no-sibling {
    margin-bottom: -50px !important;
}

the page is in the private content!

thank you very much

• This reply was modified 9 years ago by Claus_Wien.

Hi,

so call me stupid, i activated now the custom class put the code in the custom.css (because i had the rest of the changes also there) and i would like to have these changes in desktop-sizes only.

therefore i have to have the vertical align: bottom otherwise it changes the image postition with the page size.

long story short, it doesnt work, and i dont know why…

Anbei die Daten

LG
Claus

Hi,

this doesn’w work as should. i would like to have the portrait on the green line (as you can see at the termin-page)

now i can adjust it for one screen size – which doesnt fit for a responsive design. Did you try to change the screensize once?

For page 673 it works like a charm, for 617 it doesnt!

Here is my custom.css:
/* Have fun adding your style here :) – PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

/* General Custom CSS */

/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

@media only screen and (min-width: 768px) {
/* Add your Desktop Styles here */
.page-id-673 .av_two_fifth {
vertical-align: bottom !important;
}
.page-id-673 .avia-builder-el-no-sibling {
margin-bottom: -50px !important;
}
.page-id-617 .freigestellt_portrait {
vertical-align: bottom !important;
margin-bottom: -50px !important;
}
.freigestellt_portrait {
top: 50px;
}

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */

}

Hi,

really? I can imagine, because at the termin page the line is grey/white, at the price page it is grey/green.

Now pls go to termin-page and change the size of the window and then go to price-page and do the same.

An this is exactly that what i would like to achive, that the image is sticky to this “line”/frame/etc how it is ever called.

Page 617 its the id of the price-page

maybe we can do a teamviewer session, it would be faster ;)

…can anybody help, because with andy’s solution it look like this atm:

@andy no i can’t adjust as needed, because of the responsive design.

• This reply was modified 8 years, 11 months ago by Claus_Wien.

Hi Yigit,

thank you for your fast response.

Long story short, I have 2 images at 2 pages what i would like to adjust.

page-id 673 (termine) works perfect and looks already as it should (the code came from rikard)

page-id 617 (preise) i would like to do the same and was wondering why it didn’t worked as expected (my reply on 18th june)
then andy started to do some custom-class (which works now) and repeating the same answer again and again ;)

the problem with his solution is, that i can adjust the image only for one specific resolution, this is no responsive design solution!

so please be so kind and go to the termin page and change the screen size – the image sticks to the grey/white border
than go to preise page – the image doesn’t stick to the grey/green border

do you mean ftp?

?