-
Posts
-
Hi team
I have an issue with when I switch from landscape to portrait view with the headings above by small images. Because two of the headings are quite long, they move to sit on two lines, which pushes the image down, in turn pushing the button down. It looks bad.
Do you have any ideas on how I could keep this area equal, other than changing the heading text to say something else?
http://www.nzbarrister.com/Melanie/
The culprit is “Relationship Property” and Employment Law” in ipad Portrait view.
Thank you for your help.
Regards
ArranHi arrantawhara!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (max-width: 990px) and (min-width: 768px) { div .av_one_fifth { margin-left: 0; width: 100%; }}It will increase the column size of 1/5 element to 100%. Alternatively, you can turn on custom CSS field for ALB elements ( http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and give your titles a custom class and we can provide you another custom CSS code which would change their minimum height on mobile
Regards,
YigitHi Yigit
hmmmm, I don’t like the look of the 1/5 to 100% sorry, but thank you for that fix.
I will try the custom CSS field for ALB elements and wait for your custom css code.
Thank you
Hi!
In that case, please give titles a custom class ( it can be the same ) and add following code to Quick CSS
@media only screen and (max-width: 990px) and (min-width: 768px) { .your-custom-class .avia_textblock { min-height: 45px; }}Best regards,
YigitFurther to check this, I used your actual code-
@media only screen and (max-width: 990px) and (min-width: 768px) {
.your-custom-class .avia_textblock { min-height: 45px; }}with .your-custom-class as the custom css for the title.
Hi!
I have adjusted custom CSS code a bit and now it does work fine on my end. Please review your website
Best regards,
YigitHi Yigit!
Thank you so much for the fix.
I feel a little embarrassed though to ask for more help…..
On ipad landscape view I cannot work out how to increase button size to be equal with images above.
Portrait view they are perfect. I did try @media min-width 769, max-width -989 but got no where.
Your support is first class btw!!!
Hey!
Please give custom class to buttons as well and add following code to Quick CSS
@media only screen and (max-width: 989px) and (min-width: 768px) { .avia-button {min-width: 140px!important; }}Best regards,
YigitHi Yigit
I try:
@media only screen and (max-width: 989px) and (min-width: 768px) {
.avia-button .avia-size-large .home_button {min-width: 150px!important; }}With custom class being .home_button
It did not work sorry.
Hey!
Please try following one instead
@media only screen and (max-width: 989px) and (min-width: 768px) { .home_button .avia-button { min-width: 150px; }}Regards,
YigitHi Yigit!
First off, thank you so much for your patience and help in resolving this issue. This is what I have ended up doing to get the button to display perfectly in all screens:
@media only screen and (max-width: 989px) and (min-width: 768px) {
.avia-button.avia-size-large {
padding: 10px 10px 10px;
font-size: 10px;
min-width: 104px;}
}@media only screen and (max-width: 989px) and (min-width: 768px) {
.home_button .avia-button { min-width: 105px; }}@media only screen and (min-width: 990px) {
.avia-button.avia-size-large { min-width:140px;}}@media only screen and (min-width: 1140px) {
.avia-button.avia-size-large { min-width:155px;}}Do you think this is efficient coding? Can this be made more efficient at al?
Kind Regards
Arran
- The topic ‘Font-size in Ipad Portrait View’ is closed to new replies.