Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #457756

    Hi,

    I have created a local wordpress site and on each page I have a layout section to the right, with buttons inside it. In order for these to line up to the rest of the content correctly, I need to align them right. The problem is it then aligns right on mobile and looks terrible, so is there a ways to make everything align to center on mobile only?

    As I said, this is local so I can only provide screenshots if requested.

    Thanks,
    Matt

    #457930

    Please could someone help me? It’s rather urgent.

    #458175

    Hi!

    Thank you for using Enfold.

    Please provide a screenshot of the issue, you can use imgur or dropbox. Or switch the builder to debug mode then copy the generated shortcodes below the advance layout builder. Post it on pastebin.com so that we can test it on our installation. This is how you switch the builder to debug mode: http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/

    Cheers!
    Ismael

    #458192

    Hey!

    As you are doing mods your self, please take a look here: https://www.campaignmonitor.com/blog/post/4240/creating-a-centred-responsive-design-without-media-queries

    which will help you out to work on the issue. If we can not see an online version of the site, it is hard for us to debug and assist.

    Please let us know when you are online, and we will be more than happy to help you out.

    Best regards,
    Basilis

    #458274

    https://www.dropbox.com/sh/dww5jl4yqrf04yt/AAAIOesaRIgch6CrY0doavgKa?dl=0&s=so

    As you can see, the buttons and the image need to be aligned to center in mobile view.

    Thanks for your help,
    Matt

    #458434

    Hey Matt!

    We are going to need to see your website live in order to provide you an accurate custom CSS code. We will keep the thread open, please post the link to your page when you launch your website.

    Best regards,
    Yigit

    #458436

    Okay, thanks a lot,

    Matt

    #458438

    Hi!

    You are welcome. Thread will be on hold until you reply, so please reply to the topic with your link only, otherwise it may be closed accidentally :)

    Cheers!
    Yigit

    #465735

    #465737

    here’s the site, need it all centred on mobile,

    Thanks

    #465785

    Hi Yigit, could you help me now please?

    #465794

    Hi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 769px) {
    .home #av_section_1 .avia-button-right { 
    float: left !important; 
    margin-left: 10% !important;
    }}

    Best regards,
    Yigit

    #465796

    Sorry, that hasn’t worked :/

    #465804

    Wait, none of my quick css changes are working, this may be a permissions issue.

    #465806

    Hey!

    Please make sure that wp-content/uploads folder has correct permissions ( 755 ) – http://codex.wordpress.org/Changing_File_Permissions

    Best regards,
    Yigit

    #466271

    Hi, I sorted the permissions and quick css is working but this code you gave me hasn’t changed anything.

    Thanks,
    Matt

    #466929

    Hey!

    are changes in Quick CSS working for you now?
    If yes try this code for centering on mobile:

    @media only screen and (max-device-width: 736px) {
    .flex_column.av_one_third.avia-builder-el-4.el_after_av_two_third.el_before_av_two_third {
    margin-left: -45px !important;
    }
    .flex_column.av_one_third.avia-builder-el-14.el_after_av_two_third.el_before_av_section.avia-builder-el-last.column-top-margin {
    margin-left: -45px !important;
    }}
    

    and adjust as needed.

    Cheers!
    Andy

    #466986

    Hi there, this did move the elements I wanted to move, which is great.

    Sadly, I don’t want to use certain pixels to position them due to the fact that all different devices have different sizes, is there a way to align these items centrally rather than just add margin to them?

    Matt

    #467749

    Hey Matt,

    You could also use “margin: 0 auto” with a media query in this case, but you would need to specify the width of each element you’d like to center.

    For example:

    @media only screen and (max-device-width: 736px) {
    .class_name {
    width: 200px !important;
    margin:0 auto !important;
    }

    Best regards,
    Dake

Viewing 19 posts - 1 through 19 (of 19 total)

You must be logged in to reply to this topic.