-
AuthorPosts
-
March 9, 2016 at 3:45 pm #595611
I have 3 Columns. One Image in each colum using the caption to put type over the top (red type). I am looking to maintain the spacing I have on the top and on the left and right of the Color section these columns are in but have no spacing on the inside of the images. Attached is a screenshot with arrows point to the only area I want no spacing..
March 9, 2016 at 4:07 pm #595627Hi sublime5o!
Can you please post the link to your page? Have you tried using Grid Row element?
Cheers!
YigitMarch 9, 2016 at 4:12 pm #595636Wish I could. This is on a local site. I am basically use a Color Section and then within that 3 columns and a single image in each column. I have tried the grid. Same issue with that.
March 9, 2016 at 4:22 pm #595649Hi!
Please edit your Color Section element that has your 3 columns inside and give it a unique ID – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png and then add following code to Quick CSS in Enfold theme options under General Styling tab
#your-unique-id .av_one_third { margin: 0!important; width: 33.3%!important; }
Cheers!
YigitMarch 9, 2016 at 4:26 pm #595657I added this and it basically looks the same the inner spacing is still the same. If I change the width to 29% or something in width then they loose the spacing but then it is not centered.
March 9, 2016 at 4:50 pm #595669Hi!
Can you please try adding following code as well
#your-unique-id .av_one_third * { padding: 0 !important; }
Regards,
YigitMarch 9, 2016 at 4:54 pm #595673That did not help either. No change at all.
March 9, 2016 at 4:57 pm #595675Hi!
If that is the case, i am afraid we are going to need to see your website live. Please let us know when you launch it.
Best regards,
YigitMarch 9, 2016 at 4:59 pm #595677OK..??? Did you even try to replicate this on a testing site? If so please let me see the URL you have so I can see what is going on.
March 9, 2016 at 5:04 pm #595681Hey!
Please try adding following code to Quick CSS as well
#your-unique-id .avia-image-container * { width: 100%; }
Best regards,
YigitMarch 9, 2016 at 5:17 pm #595693Thanks! That got them pushed together with no spacing. I had to add a -90px margin-top to get the top margin like i needed it but it is still missing the right and left side margin/spacing that is needed (see link). Here is the code I added so far.
#home-hero .av_one_third {
margin: 0!important;
margin-top: -90px !important;
width: 33.3%!important;
}#home-hero .avia-image-container * {
width: 100%;
}March 9, 2016 at 6:29 pm #595725Hey!
Please add following code to Quick CSS as well
#home-hero .content { padding: 50px; }
Cheers!
YigitMarch 9, 2016 at 6:39 pm #595734Thanks but this did nothing, i tried to apply !important to it but it just moved it off center.
March 14, 2016 at 5:26 pm #597876Hey!
can you provide us a link to your site showing the elements in question please? we need to be able to inspect the elements.
Cheers!
AndyMarch 14, 2016 at 5:35 pm #597893Below is a link… You will see the middle image is not the same size as the other two. That is the only issue right now..
March 17, 2016 at 4:35 pm #599678Hey!
Can you provide us admin access to have a deeper look into it? Check if your images have the same sizes in your backend. Post login details here as private reply.
Cheers!
AndyMarch 17, 2016 at 4:43 pm #599693Images are all the same size. Below is the access you requested.
March 17, 2016 at 5:12 pm #599762Hi!
it is caused by your section ID “home-hero”. If I remove it then it’s working as expected.
Cheers!
AndyMarch 17, 2016 at 5:37 pm #599795What are you talking about? If you remove home hero you basically get 3 images with padding next to each other. I have been told previous in this post to add specific styles. Please look at the rest of the ticket/post here to fully understand.
March 17, 2016 at 5:41 pm #599802Hey!
I tried to check you Quick CSS field, but can’t find any custom code in it. We need to check which values you provided to your home-hero, cause it seems to me that you added more than Yigit provided to you in his code. Where did you put your custom code?
Cheers!
AndyMarch 17, 2016 at 5:56 pm #599824I added it to style.css (which if you inspect you should easily be able to find out). I added some extra values (but you told me to remove home-hero completely) so it would match what i needed (based on the first screenshot I provided).
March 17, 2016 at 6:00 pm #599832Hey!
so you are using lots of custom code for you home hero. Remove all of it. Then add them one by one to check which one is causing this issue.
Regards,
AndyMarch 17, 2016 at 6:09 pm #599847Ok. I did as you suggested (which I did previously but it did not look like the screenshot of the mockup I am trying to replicate). Here is what it looks like now. If you see what the homepage looks like now it is missing the left and right padding areas of the image column and the top (referenced: http://www.awesomescreenshot.com/image/1065613/aba6e8ababba2df65e68bc44053d6aae).
March 18, 2016 at 3:09 pm #600309Hi!
alright, thanks for the screenshot. Now try to add this code:
#home-hero .av_one_third * { margin-right: 30px; }
and adjust as needed.
Best regards,
AndyMarch 18, 2016 at 3:30 pm #600320Andy,
I added this. This is not what i need. Please, again, review the entire ticket. I do not think you totally understand what I am looking for. The first post I made with the screenshot is what I need (images right next to each other no padding/margin but with spacing around the outside of the images column). I am not sure how much further I can try to explain, since this has been going on for almost 2 weeks.
March 18, 2016 at 3:42 pm #600339Hi!
please make it easy and clear for us. We have hundred of open tickets and waiting customers each day. If you want a precise code then simply send us a mockup showing exactly the results you want to achieve. I though your last screenshot is what you want to achieve …
Best regards,
AndyMarch 18, 2016 at 3:46 pm #600341I DID. I sent in the first post I made. I understand you have many tickets, but this is the problem when you do not read the entire thread and several different people are answering the same tickets. PLEASE SEE MY FIRST POST.
March 18, 2016 at 4:49 pm #600394Hey!
I haven seen this screenshot already. My last code provides you exactly this solution and it works fine. You did not use it inside your Quick CSS field, that’s why I put it there now. Now your website looks exactly as your screenshot/mockup from your first post.
Cheers!
AndyMarch 18, 2016 at 4:51 pm #600397Hey!
if you want to change caption position use this code as well:
#home-hero .av-image-caption-overlay-center p { margin-left: 40px; }
and adjust as needed.
Cheers!
AndyMarch 18, 2016 at 5:12 pm #600415I have to apologize as I thought I posted my mock up in the very beginning (was a little bit ago though) but I posted what I had and typed the description of what I wanted. Here is an actual mock up of what I am trying to do. Again sorry for the confusion.
http://www.awesomescreenshot.com/image/1093669/3c5c54ffc4ef68e5cc41f106d64dc0b2
-
AuthorPosts
- The topic ‘3 Columns, Image in each no spacing on the inside of the images’ is closed to new replies.