Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 21, 2015 at 3:08 pm #400076
    Me.llamo

    Hi there!

    For two pages I made a layout in 3 x 1/3. I placed only text in the middle section: a centered subtitle and left-aligned bodytext.
    I want this left-aligned text to align correctly with the centered subtitle, so gave the left-aligned text:
    – padding-left 92px for page A
    – padding-left 30px for page B

    Made these paddings in page editor, not in custom css. It only looks OK for desktop now.
    Which coding is necessary to get this left-aligned text to look good on desktop as well for tablet and mobile phone?

    Regards,
    Me.llamo

    February 23, 2015 at 9:47 am #400457
    Rikard

    Hi Me.llamo!

    Does the text block have to be aligned to the left? If not, the easiest option would be to add a 1/1 instead of 3×1/3 and just center the text in the 1/1. Would that work for you?

    Best regards,
    Rikard

    February 23, 2015 at 12:02 pm #400548
    Me.llamo

    Hi Rikard,

    Yes that’s the easiest way, but I don’t fancy that alignment for these two specific blocks.

    If you will only provide me a code (incl. post-id) and the right mediaquerie, I will figure out myself which padding or margin I need for all mobile and tablet device. I’m just a beginner ;-)

    Or is it easier 1/1 and then give these 2 left-ligned blocks a huge padding 250px or something in that range?
    It probably will make no difference for the outcome?!

    Best regards,
    Me.llamo

    February 24, 2015 at 2:23 am #401145
    Andy

    Hey!

    For the first link use this code:
    For iPad portrait mode:

    @media screen and (max-width: 768px) {
.page-id-18 .avia_textblock {
margin-left: -78px;
}}

    Adjust “max-width” for media query and “margin-left” as needed.

    You can right click on chrome or firefox and select inspect element to find page-id:

    Regards,
    Andy

    February 24, 2015 at 2:48 pm #401433
    Me.llamo

    Hi Andy,

    Thanks, but after several refreshments it still doesn’t respond to this code at all.

    Could you also please take a look at the sidebar? It suddenly stops at the bottom seeing it on a laptop.

    Regards,
    Me.llamo

    • This reply was modified 9 years, 8 months ago by Me.llamo.
    February 25, 2015 at 1:30 pm #402023
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    .html_stretched #wrap_all {
background-color: #262626;
}

    and please try adding !important rule to Andy’s code as following 

    @media screen and (max-width: 768px) {
.page-id-18 .avia_textblock {
margin-left: -78px !important;
}}

    Cheers!
    Yigit

    February 25, 2015 at 10:34 pm #402372
    Me.llamo

    Hi there!

    The first code (.html–stretched…) looks well now on a laptop. Thumbs up!
    Did not look well for larger screens, but gave every page more whitespace at the bottom and that worked out.

    The second code seems to work too…..I am testing it now….

    • This reply was modified 9 years, 8 months ago by Me.llamo. Reason: it works after all
  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Margin left not looking good in responsive mode’ is closed to new replies.