-
AuthorPosts
-
March 2, 2016 at 3:14 pm #592088
Hi Support,
I am experiencing issues with a number of elements when viewing on mobile and tablet
on home page
– logo
– columns (ground rent / landlord services / reference library)
– menuCan you advise how I can…
– make the logo position stay relative to the text below
– make the columns fill the screen width when on mobile or tablet
– make the menu mobile on tablet on smallerBest Regards,
Richard
March 4, 2016 at 1:11 pm #593243Hey quadrocreative!
Thank you for using Enfold.
1.) Add the logo as an image element above the text. Or try in the Quick CSS field:
@media only screen and (max-width: 767px) { .responsive #top .logo { width: 100%; } .responsive .logo a { text-align: center; } .responsive .logo img { margin: 0; display: inline-block; } }
2.) This custom css codes reaks the responsive layout of the columns:
.home .flex_column.avia-builder-el-15, .home .flex_column.avia-builder-el-17, .home .flex_column.avia-builder-el-19, .home .flex_column.avia-builder-el-22, .home .flex_column.avia-builder-el-24, .home .flex_column.avia-builder-el-27, .flex_column.av_one_fifth.avia-builder-el-18.el_after_av_image.el_before_av_one_fifth { margin: 0 10px !important; width: 17.2% !important; } .home .flex_column.avia-builder-el-15, .home .flex_column.avia-builder-el-17, .home .flex_column.avia-builder-el-19, .home .flex_column.avia-builder-el-22, .home .flex_column.avia-builder-el-24, .home .flex_column.avia-builder-el-27 { margin: 0 10px !important; width: 17.2%; }
What does it do?
3.) Could you please provide a screenshot of the mobile layout that you want?
Regards,
IsmaelMarch 4, 2016 at 3:40 pm #593297Hi Ismael,
Many thanks for your response
I have removed some of the coding I had to bring in the columns and now its much better when responsive.
All I need to do is have the logo image appear centrally to the text below (only in full screen mode)… in mobile / responsive it can be on the left. Can you please advise how I can make it padding by a percentage rather than by a px number.
I have tried the following code…
.logo img {
padding-left: 45%; !important
}but it does not align the logo with the column below
Best Regards,
Richard
March 7, 2016 at 1:44 pm #594274Hi!
It looks like you have got this sorted the logo looks centered to the text below it as you have mentioned
Please let us know if you have any questions.
Best regards,
Vinay KashyapMarch 10, 2016 at 12:40 pm #596252Hi Vinay,
Unfortunately I could not get it centred in all positions relating to the size of the screen.
Is there a way of using a screen percentage rather than px value?
Best Regards,
Richard
March 15, 2016 at 6:16 am #598170Hi!
The only workaround I can think of other than adding multiple css media queries is to remove the current logo then edit the page, add the logo using an image element above the phone text block.
Regards,
IsmaelMarch 15, 2016 at 11:38 am #598311Hi Ismael,
I don’t think that removing the image would work across the whole of the site.
I would be happy to use multiple css media queries… Can you advise how to set up four versions split in to two…
full screen: desktop 1920px width / laptop 960px width
mobile: ipad 768px width / mobile 480px widthBest Regards,
Richard
March 19, 2016 at 9:04 am #600629Hi!
Looks like you managed to align the logo by setting the width of the container. Good job. :)
Best regards,
IsmaelMarch 21, 2016 at 12:46 am #600923Hi Ismael,
Yes – thanks
I adjusted some of the code you supplied and it worked a treat
Many thanks for your support
All the best
Richard
March 21, 2016 at 3:28 am #600947 -
AuthorPosts
- The topic ‘Issue with responsive design’ is closed to new replies.