Tagged: , , , , ,

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • June 11, 2015 at 12:12 pm #457756
    mattwilliamsyogi

    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

    June 11, 2015 at 5:40 pm #457930
    mattwilliamsyogi

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

    June 12, 2015 at 6:20 am #458175
    Ismael

    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

    June 12, 2015 at 7:09 am #458192
    Basilis

    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

    June 12, 2015 at 10:15 am #458274
    mattwilliamsyogi

    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

    June 12, 2015 at 3:56 pm #458434
    Yigit

    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

    June 12, 2015 at 3:59 pm #458436
    mattwilliamsyogi

    Okay, thanks a lot,

    Matt

    June 12, 2015 at 4:00 pm #458438
    Yigit

    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

    June 29, 2015 at 11:35 am #465735
    mattwilliamsyogi

    June 29, 2015 at 11:35 am #465737
    mattwilliamsyogi

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

    Thanks

    June 29, 2015 at 12:34 pm #465785
    mattwilliamsyogi

    Hi Yigit, could you help me now please?

    June 29, 2015 at 12:42 pm #465794
    Yigit

    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

    June 29, 2015 at 12:45 pm #465796
    mattwilliamsyogi

    Sorry, that hasn’t worked :/

    June 29, 2015 at 12:48 pm #465804
    mattwilliamsyogi

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

    June 29, 2015 at 12:49 pm #465806
    Yigit

    Hey!

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

    Best regards,
    Yigit

    June 30, 2015 at 10:14 am #466271
    mattwilliamsyogi

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

    Thanks,
    Matt

    July 1, 2015 at 12:34 pm #466929
    Andy

    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

    July 1, 2015 at 2:26 pm #466986
    mattwilliamsyogi

    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

    July 2, 2015 at 8:41 pm #467749
    Dake

    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

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • You must be logged in to reply to this topic.