Alignment

Home Forums Auberge Alignment

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #16151

    enmaagrp@gmail.com
    Participant

    Alignment

    Resolved

    Hi, I want to ask, because I am having an issue with alignment in mobile version in this page, the Protein Calculator Page, http://prntscr.com/fx4ppf, in the mobile version they seems to overlap to each other. http://prntscr.com/fx4r0k , http://prntscr.com/fx4r9c , http://prntscr.com/fx4rdw , Kindly check and let me know if you have questions, I dont have issue with the calculator for it is another plugin, but my concern is with how the page looks in mobile and other gadgets aside from desktop.

    Do you know by chance if there is a way that I can make the submit button in the center, http://prntscr.com/fx4rwk, or more attractive, this is form which they will send suggestions.

    Thank you and have a nice day.

    #16152

    Oliver Juhas
    Keymaster

    Hi,

    I’m sorry but the issue is not related to the theme but rather to your page content and custom HTML (and CSS) you have applied.

    I can see you have split your http://www.ihealthy.ae/protein-calculator page content width this custom HTML:

    <div style="width: 40%; padding: 0 5pt 0 0; float: left;">
    YOUR PROTEIN CALCULATOR HTML HERE
    </div>
    
    <div style="width: 40%; padding: 0 5pt 0 0; float: left;">
    YOUR RECOMMENDED PROTEIN INTAKE TEXT HERE
    </div>
    
    <div style="width: 50%; padding: 0 10pt 0 0; float: left;">
    YOUR FIRST TABLE HERE
    </div>
    
    <div style="width: 50%; padding: 0 10pt 0 0; float: left;">
    YOUR SECOND TABLE HERE
    </div>
    

    As you can see you have introduced some divs with inline styles. Please note these inline styles are not responsive. There is no issue with the theme responsiveness on your website as you can see on your frontpage at http://www.ihealthy.ae/ for example. The above issues is related to your custom HTML and inline styles you applied to that page content.

    The easiest solution to your issue is to use a page builder to build the desired page layout. The theme is actually compatible with the best page builder plugin, the Beaver Builder and you can use its free version for you purpose :)

    Once you use a page builder to create the desired columned page content, it will be also perfectly responsive on mobile devices too.

    Just a note about HTML tables, though. Please note that they are not responsive on mobiles. You either need to add some custom responsive CSS styles via your child theme or WordPress’ custom CSS field, or you can use a plugin to create your tables and make them responsive too: you can maybe try https://wordpress.org/plugins/automatic-responsive-tables/ or https://wordpress.org/plugins/magic-liquidizer-responsive-table/ – just search the plugin repository or Google.

    Hope these tips will help you resolve the issue :)

    Best regards,

    Oliver

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

You must be logged in to reply to this topic.