Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 17, 2018 at 12:51 pm #928448
    jairharder

    Helloo,

    I finished the desktop version of my website. The website works good and looks good as-well. Unfortunately, the other devices don’t work the same. I would like to adjust but the adjustment features are very minimal. How can I create a similar design in the other devices?

    Looking forward hearing from you.

    Jaïr

    March 17, 2018 at 3:28 pm #928492
    Mike

    Hey jairharder,
    Can you link to the site and give an example of what you are having mobile issues with so we can be of more assist.

    Best regards,
    Mike

    March 17, 2018 at 3:44 pm #928499
    jairharder

    Hey Mike,

    Hereby the link of the website…

    Home

    Home page:
    – first picture too close to logo
    – the 2nd content area contains an unwanted enter
    – the layerslider (2nd picture) doensn’t show completely;
    – the read more button doesn’t show and read well

    Diensten:
    – the buttons are ordered not align;
    – the 4th content area contains an unwanted enter

    That’s all really.
    Further more, I would like to add the logo in the menu screen.

    I hope you could help. If you need to login to do some adjustments just ask.

    Greetings Jair

    March 17, 2018 at 6:48 pm #928533
    Mike

    Hi,
    1: To add 20px padding below your logo for mobile only, Try this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all .av-logo-container {
    padding: 0 0 20px!important; 
}
}

    2: for the unwanted space between your bullet points in the second section, please add this code:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all .flex_column.avia-builder-el-5 {
    margin-bottom: -20px!important; 
}
}

    3: for the layerslider background image, try:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all #av_section_3 {
    background-size: cover!important; 
    background-position: center center!important; 
}
}

    But this could be better if you create a new slider with the image and text designed for your mobile view, then we would add the new slider below the current one and use the screen options to only show it on mobile, and hide the current one on mobile.

    4: I not sure I see the issue with the button, please explain more, perhaps with a screenshot.
    5: for the buttons on the other page, we can center them:

    @media only screen and (max-width: 767px) {
.responsive #top.page-id-1511 #av_section_1 .flex_column {
    padding: 0px !important;
    margin: 0px !important;
}
.responsive #top.page-id-1511 .avia-builder-el-7,.responsive #top.page-id-1511 .avia-builder-el-2 {
display: none !important;
}
}

    6: for the unwanted space between your bullet points on the second page:

    @media only screen and (max-width: 767px) {
.responsive #top.page-id-1511 .flex_column.avia-builder-el-21 {
    margin-bottom: -20px!important; 
}
.responsive #top.page-id-1511 .flex_column.avia-builder-el-23 {
    margin-top: 0px!important; 
}
}

    Best regards,
    Mike

    March 19, 2018 at 11:52 pm #929427
    jairharder

    Hi Mike,

    Many many thanks for your code. It worked:))

    Via the link below you will find some screenshots of the review button. The button is out centre and the textculum is very tight.

    I hope you could help me with this one aswell.

    Greetings Jaïr

    March 20, 2018 at 1:48 am #929451
    Mike

    Hi,
    For the button, Please Try this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 767px) { 
#top.home .flex_column.avia-builder-el-17 {padding: 0px !important;}
}

    Yet, I couldn’t find the tight text on your page. Is this on a different page?

    Best regards,
    Mike

    March 20, 2018 at 10:14 pm #930135
    jairharder

    Hi,

    Your code solved it all. Many thanks for the good help.

    Greetz,
    Jaïr

    March 20, 2018 at 10:57 pm #930156
    Jordan Shannon

    Hi,

    I’m glad Mike was able to help. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Responsive site adjustment’ is closed to new replies.