Overlap image and contact form - Support | Kriesi.at

Viewing 19 posts - 1 through 19 (of 19 total)

Author

Posts
February 18, 2015 at 7:01 pm #398388

webstrats
Participant

Love Enfold! It is becoming my go-to theme!

Question raised by my customer –
We are trying to replicate what was done on http://kardischlaw41603221-235937-sml-1.hibustudio.com
to our new site being built at http://webstrats.com/kardisch/
Is there a way to take the Image that says Questions? Fill out our Contact Form
and have it overlap the contact form like is done on the original site?

Thanks!

February 18, 2015 at 10:39 pm #398513
Elliott
Inactive Moderator
Hi webstrats!

Try adding this to your custom CSS.
```
.avia-builder-el-16 {
top: 40px;
z-index:10;
}
body #gform_wrapper_2 { padding-top: 40px; }
section.avia_codeblock_section.avia_code_block_1 {
top: -20px;
position: relative;
z-index: 0;
}
```
If you add more elements to the sidebar though then you may need to update the CSS class numbers used in the code provided.

Cheers!
Elliott
February 19, 2015 at 4:51 am #398630

webstrats
Participant

I made an adjustment and it works fine – Thanks!

now another question –
I need to move the At the end of the day text box with image so it is in the middle. is there any way to add padding or another text box to sort of center it?

Thanks!

February 19, 2015 at 10:53 am #398752
Ismael
Moderator
Hi!

Replace the text align value to center:
```
&nbsp;&nbsp; At the end of the day, 
&nbsp; &nbsp;quality tips the scales.
```
Best regards,
Ismael
February 20, 2015 at 12:58 am #399364

webstrats
Participant

When I paste that in it adjusts the text but not the image. I cannot get the image to sit to the left of the text if the text is centered

February 20, 2015 at 12:34 pm #399572

Yigit
Keymaster

Hey!

You can add three 1/3 column elements to that section and place your image and text into the middle column and they should be automatically centered :)

Best regards,
Yigit

February 20, 2015 at 3:58 pm #399715

webstrats
Participant

But that puts them way down beneath the rest of the page. They need to be centered under the first text box, to the left of the 1/4 section that has the Practice Area links and Contact Form.
As far as I can see, I cannot drag a layout element into another layout element.

February 20, 2015 at 11:01 pm #399933

webstrats
Participant

Ok, scratch all that. We all going a little different and I think easier way. At the bottom of the text box we have “At the end of the day” centered and in bold. Can we use a little HTML magic to make that one line centered, bold, in maroon (7d1202) and a few pixels bigger (the current fonts size is 15 – maybe make it 18)?

Thanks!

February 21, 2015 at 1:55 pm #400072
Ismael
Moderator
Hi!

Replace the class attribute with “p4”:
```
At the end of the day, quality tips the scales
```
Add this to the Quick CSS field:
```
.p4 { font-size: 30px; color: #7d1202; } 
```
Best regards,
Ismael
February 23, 2015 at 9:27 pm #401005

webstrats
Participant

Again, Thanks for all your help.
As I have built out the remaining pages, now the image above the contact form (which you helped make look so nice) is out of place on the home page and back to it’s older position (no overlap) on the inside pages. Any suggestions?

Thanks.

February 24, 2015 at 2:23 pm #401418
Yigit
Keymaster
Hi!

Please change the first code posted by Elliott to following one
```
.home .avia-builder-el-17 {
top: 40px;
z-index: 10;
}
```
Cheers!
Yigit
February 25, 2015 at 5:20 am #401844

webstrats
Participant

No luck – still not overlapping as it should. Tried it with 18 and 19 as well.

Also – is there a way to make the linked images on the right for Practice Areas stand out when the mouse rolls over?

Thanks.

February 26, 2015 at 5:05 am #402441
Rikard
Keymaster
Hey!

Please try the following:
```
section.avia_codeblock_section.avia_code_block_1 {
top: -40px !important;
}
```
Regards,
Rikard
February 26, 2015 at 7:02 pm #402915

webstrats
Participant

A little closer, but not quite. And only on the home page – other pages no change.

February 27, 2015 at 8:48 pm #403640
Andy
Inactive Moderator
Hey!

please add this to Rikard’s code:
```
.avia-image-container-inner, .avia_image, .av-image-caption-overlay {
z-index: 1;
}
```
Don’t forget to clear your browser cache and refresh your website a few times.

Regards,
Andy
February 27, 2015 at 9:08 pm #403648

webstrats
Participant

Thanks – it is slightly better on the home page but not all the way, AND
not moved on most interior pages.

Another issue – I have a bulleted list on the General Personal Injury page, but the bullets are not displaying. I deleted them and tried again – same. Suggestions?

Thanks.

March 1, 2015 at 6:45 pm #404137
Andy
Inactive Moderator
Hey!

please open a new ticket for a new issue.

Please show us a link and/or a screenshot where it does not work for you. Beside this please provide us a mockup of what you want to achieve, so we can give you some more precise CSS code. For me the code we already provided you seems fine.

Best regards,
Andy
- This reply was modified 9 years, 8 months ago by Andy.
March 1, 2015 at 7:52 pm #404170

webstrats
Participant

OK, I created an new ticket for the new issue – the bulleted list. Meanwhile, I am still struggling with the original issue – making the image overlay the contact form. Should I create that in a new ticket as well.

To recap:
On http://webstrats.com/kardisch/, customer would like the image that says Questions to overlap the contact form, just as it does on http://kardischlaw41603221-235937-sml-1.hibustudio.com
We had it working for a little while, but as more things are being done on this page it stopped working. And it has never worked on the interior pages.

March 3, 2015 at 8:14 am #404984
Ismael
Moderator
Hi!

Please try this:
```
body #gform_wrapper_2 {
padding-top: 40px;
margin-top: -35px;
}
```
The form should look like this after:

Cheers!
Ismael
Author

Posts

Viewing 19 posts - 1 through 19 (of 19 total)

You must be logged in to reply to this topic.