Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • July 20, 2015 at 6:59 pm #476029
    ACNLatitudes

    Hello. There are a couple of problems that happen when I resize the web browser to test the responsiveness of the site.

    Sample page: http://latitudes.org/behavior-charts/

    1) You will see that the items that are towards the end of the main menu (e.g., Behavior Charts, Forums) get knocked down to the second line when the browser is resized (e.g., viewed at iPad resolution). Is there any way to fix this, so that the menu looks cleaner when resizing the page? It looks great in full size and looks fine in mobile version (it’s just he in between responsive sizes that have the issue).

    2) You will also see that the long title goes to more than one line (which is fine) when the browser is resized. However, there is a really large white spacing between the lines of the title when it is displayed on multiple lines, which does not look right. How can this white space between the lines of the title be reduced?

    Please advise on what needs to be done to resolve these issues. Thanks!

    July 21, 2015 at 12:29 am #476223
    Dake

    Hey ACNLatitudes!

    1) You have a couple methods of resolving this issue.

    – Would you like it to switch to the mobile menu once it gets down to a certain screen size (using a media query)?

    – Or would you prefer to adjust the margins/font size for each menu item?

    You can use the below css to adjust the line-height for the title on certain screen sizes:

    @media only screen and (min-width: 768px) {
#top #wrap_all .alternate_color h1 {
  line-height: 1.2em !important;
}
}

    You can adjust the line-height and minimum device screen size to your liking.

    Regards,
    Dake

    July 21, 2015 at 5:28 pm #476641
    ACNLatitudes

    Thanks for the reply.

    1) I would prefer to adjust the margins/font size, However, in case that doesn’t end up looking good, I would also be interested in knowing the option for switching to the mobile version too. That way I can try both out to see which option looks best.

    2) I tried using the code that you provided in quick CSS (and altered the line height), but it didn’t change anything. I’m providing my login info in the Private Content area in case you want to try yourself.

    Thank you.

    July 21, 2015 at 11:51 pm #476760
    Dake

    Hey!

    You can use the settings below to adjust the font:

    http://i.imgur.com/wE6PWgA.png

    I have reduced the font size to 12px (15px was your original font size).

    Alternatively you can use this css to convert your menu to the mobile menu at a larger width:

    @media only screen and (max-width: 1024px)
.container #advanced_menu_toggle, #advanced_menu_hide {
  display: block;
}

    The line height css is working now as well.

    Cheers!
    Dake

    July 22, 2015 at 6:51 pm #477268
    ACNLatitudes

    Hi Dake, Thanks for the reply. Is it possible to use CSS that will only reduce the font size of the main menu to 12px when the website is being viewed at a smaller width, but still keep it at 15px when it is viewed at a larger width? If so, please advise on what would need to be added to the Quick CSS.

    Also, in regards to the line height of the title, it looks great in mobile view, but it is still spaced out when viewed at a size that is in between mobile width and desktop width (please try resizing the browser window and you will see what I mean). Is there something else that needs to be altered to ensure the line height is consistent regardless of the particular width of the page being viewed?

    July 22, 2015 at 8:14 pm #477297
    Dake

    Hi!

    The line height and font size are now controlled by more accurate media queries.

    Best regards,
    Dake

    July 22, 2015 at 8:32 pm #477320
    ACNLatitudes

    My apologies. I think I might have accidentally overwritten what you did, since I think I might have been editing the quick css page at the same time that you were and overwrote what you did when I hit save. Can you please write out what the code is here in your response, so I can re-insert it into the site?

    July 22, 2015 at 10:28 pm #477391
    Dake

    Hey!

    That’s ok, I went ahead and added the media queries again:

    @media only screen and (max-width: 1085px) {
#top #wrap_all .alternate_color h1 {
  line-height: 1.2em !important;
}
}

@media only screen and (max-width: 1110px) {
#top #header .av-main-nav > li > a {
  font-size: 9.5px !important;
}
}

    Cheers!
    Dake

    July 22, 2015 at 10:38 pm #477394
    ACNLatitudes

    Hi Dake. That looks great! Thanks so much. I have one final question and then I think we are all set. Is it possible to have a little padding between the title and the breadcrumb when the width of the page is resized. You will see that the two are practically touching each other as you resize the page to a lower width. Thanks!

    July 23, 2015 at 12:00 am #477415
    Dake

    Hi!

    I added the below css to determine the margin-top for the breadcrumb:

    @media only screen and (max-width: 1085px) {
.breadcrumb-trail .trail-end {
  margin-top: 15px !important;
}
}

@media only screen and (max-width: 1085px) {
.alternate_color .breadcrumb a {
  margin-top: 15px !important;
}
}

@media only screen and (max-width: 1085px) {
.breadcrumb .sep {
  margin-top: 15px !important;
}
}

    Regards,
    Dake

    July 27, 2015 at 6:19 pm #479218
    ACNLatitudes

    Looks great. Thanks again! You can close this ticket out.

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Problem with Menu and Title when Resizing Web page (Responsiveness)’ is closed to new replies.