-
Posts
-
Hello there,
here is some problems i can’t solve:
in order to suit my design, i added some png files element with transparency at the bottom and at the top of some color section, the color section background is set to parallax. and there is three things i just don’t understand :1/ i managed to keep the element at the top or at the bottom of the color section, applying css code ‘position : absolute’ to elements i want to set, but i don’t understand why others elements in the color section which are not concerned by the css code are moved as well.
[ EDIT : i found a solution in setting the element with css code 100% wide ] 2/ It’s probably linked to the first issue, but those elements set as ‘position: absolute’ are not responsive to wider resolution, it keeps the element at his original size wich is, in my case 1350 px large. I’ve read on topics that it’s better to put high rez pictures, but if i do that will it works on all screen ? won’t it be a problem with mobile device regarding to the weight of the picture ? [ solved ]
3/ my color section container are set to be 100% wide, which means, all element inside are supposed to set the same width, but no matter what, there is still a gap of 1 or 2 pixels at the right of the element, and i can’t find a way to settle this in quick css, i probably have to set a container inside the color section container, but i can’t find which one is ..
well, thank you for all the help you could provide, and by the way you are all doing a great job here.
here is my website :http://lafabrique-bayonne.com/blog
thanks
Hey Ben!
Thank you for using the theme!
1.) Where are you adding the position absolute? What selectors? Please post a screenshot of the issue so that we can understand it better.
2.) Glad you figure this one out.
3.) Please add this on Quick CSS or custom.css:
.avia-section.av-minimum-height .container { display: block; }You might need to re-align some of the elements. Nice website. :)
Cheers!
Ismaelhey Ismael,
Sorry i didn’t seen your answer sooner..
1/here is an exemple of the quick css code i’m using to set the “vague 1” element which is in the ref color section named “section_ref”
.vague1 {bottom: 0px; position:absolute; border-radius: 0px;width:100%;} .section_ref div.container { width: 100% !important;}well i used tricks to replace other elements using blank space.. so it seems to work..
3/ woow i put that code in my quick css, but as you said all my elements were moved and changed size.. Your methode seems very brutal, should i replace all elements by quick css ? don’t you think there is another way to proceed ?..i don’t understand why the content is 2 pixel less wider than the div container..i’m so close to solve it.. when i try removing the float code in css with the chrome tools for developers, it seems to works.. but i don’t know what sort of code to use..
well thanks for your help anyway,
Hi!
Before anything else please update your theme files to the most recent version which brings the theme up to compatibility with the most recent releases of WordPress.
For a quick guide on updating your theme take a look at this video on updating the Enfold theme via FTP: https://vimeo.com/channels/aviathemes/67209750
Regarding using absolute positioning inside your color sections I would suggest against it. Instead using negative margins on whitespace or just removing the whitespace on section elements via a bit of css is a much less destructive way of adjusting the whitespace.
Which section specifically can we see the right pixel border/padding/margin issue?
Best regards,
Devinhey Devin, thanx for your answer, i will do the update as recommended !
the margin issue happens on chrome and safari, on the right of the ref_section for example ( the waves graphic element ) and on the right of the concept_section too ( the cloud ), i mean that’s where you can easily see it, but it happens on all graphics element set as position absolute 100 % wide..
removing white space seems to be a good idea, i didn’t know each elements comes with a whitespace around it, i though the white space was set as a margin to the bottom of the section..
well anyway it does not resolve my margin issue, which appears to be on the right side of the section..thanks a lot for your time,
i ‘ll keep trying things after the update.. :)
Ben
Hey Devin, i updated my theme as recommended..
in order to settle white space do i need to create some, using shortcodes ? or is it better to just removing them ? if you could tell me how ? i tried to use the css code “padding” to set it but i can’t find which element to refering to ?
and i still have a problem with that margin on the right side ( and i ‘m not thinking it’s the crossbar has u suggested in an another post.. cause it affect only element i set as 100% wide )
thanx for your help,
Ben
hey,
i just found a solution with the “absolute position problem”, in putting elements in boxes, so now there is no more “margin problem” on top and bottom of the color section…
but the margin on the right side of my elements is still there.. if you have any ideas…
thanx :)
Hi!
Can you please post a screenshot of “right side” issue that you are getting? Also, which browser and OS are you using?
Regards,
Yigithey Yigit,
1/here is the problem i talk about..
it does not happen on firefox, but it does happen on safari and chrome..
it affect elements settled 100% wide into 100% wide container..
i’m working on windows 7 right now..2/ i just found another problem with position of my elements on mobile device, whitespaces between elements and top or bottom of the color section i managed to make disapear on the computer, seems to be present on the major part of the site on mobile device..there is just only one who’s correctly set.
and here is the link for my website :
Hey!
The border on the right is from the browser. We can’t change that one.
For the margin on the last column element you can target it directly with:
#top.page-id-2251 .avia-builder-el-48 { margin-bottom: 0px !important; }then add that to a media query if its only for a specific size that its happening.
Regards,
Devinthanks Devin for your help,
well i tried the code you provide but it seems not to change anything.. On the other hand, i managed to find a solution, setting the section container with { height : 100% !important; } and it seems to work perfectly fine, i just hope it’s not a destructive way to do it..
well everythings seems to be fine except the margin issue that nobody can solve, i think i will put in “online” thanks to all the Kriesi team !
- The topic ‘image position and resolution issues’ is closed to new replies.