Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 26, 2018 at 5:35 pm #947367
    jonrouse

    Hello,

    I am currently designing a site and I have grid row with some headings and images.
    The desktop site shows the headings vertically centred, but when I reduce the page width to mobile it moves to the top.
    It makes it look like there’s something missing.

    Is there a way to fix this, because it’s not viable for me to use at the moment.

    The site is currently under construction, but I’ve added a link in the private section.

    Thanks.

    • This topic was modified 6 years, 7 months ago by jonrouse.
    April 26, 2018 at 6:38 pm #947396
    Jordan Shannon

    Hey jonrouse,

    Add this to quick css:

    @media only screen and (max-width: 767px)  {
body .av-special-heading .av-special-heading-tag {
    padding: 50% 0!important;
}}

    Best regards,
    Jordan Shannon

    April 27, 2018 at 11:32 am #947857
    jonrouse

    Awesome! Thanks Jordan.

    Out of interest, is there a media query I could use to change the heading size between 1360px wide and 990px wide? There’s a long title which messes up between those sizes.

    April 27, 2018 at 7:37 pm #948116
    Jordan Shannon

    Hi,

    Please refer to the following:

    https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width

    This explains how you can apply any style based on media queries.

    Best regards,
    Jordan Shannon

    May 11, 2018 at 12:42 pm #955237
    jonrouse

    Hi Jordan,

    I am still having problems – the subheading is appearing at the bottom of the cell when I pull the window in. I’ve tried adding av-subheading-below, but it’s not working. Can someone take a look so that they both appear in the vertical middle please?

    May 11, 2018 at 1:08 pm #955262
    jonrouse

    After an hour of messing around I think I have it figured out! I took this bit out

    .av-special-heading-tag

    so it’s now just

    @media only screen and (max-width: 767px)  {
body .av-special-heading  {
    padding: 50% 0 !important;
}}
    May 11, 2018 at 4:14 pm #955337
    Jordan Shannon

    Hi,

    Did you still need further help on this topic?

    Best regards,
    Jordan Shannon

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