Jump to content

Archived

This topic is now archived and is closed to further replies.

jane

Site responsiveness - awkward sizes

Recommended Posts

jane

Hi,

 

I tried testing my development site using various screen sizes and found that in a lot of situations, content wasn't being displayed correctly.

 

For example:

  • 800 x 1280; the top navigation bar isn't in mobile mode; it's displaying on 2 lines
  • 533 x 853; the page header/logo isn't shrinking
  • 768 x 1024; the page header/logo is overlapping the content in the widgetizer (language switcher and social media links)

Do you have an suggestions as to how to make sure that everything displays well regardless of the size of the screen?

 

Thanks

Share this post


Link to post
Share on other sites
James B

Hi there,

 

Depending on how many items you have in the navigation it can drop down into the second line when resizing prior to the mobile nav kicking in. You could either use @media css to prevent this by editing the font size or change the width value where the mobile navigation button kicks in.

 

How have you inserted the page/header logo? Is it manual html, it seems to appear in a media box, is that box within it's own column? If you could please screenshot the editor layout for that page and the section options for the mediabox for us.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
jane

Hi James B, OK so let's say I wanted the navigation to go into mobile mode at 800px how would I do that? @media (max-width: 800px) ?

 

Here is a link to how the header is set up in the editor layou

 

It is in a mediabox and it's in its own column. I might end up putting the image in a text widget/widgetizer though (so that I can have an English only and French only header) but I haven't tested that to see how that work work on different screen sizes.

 

The options for the Mediabox are:
-Align left
- Remove Media Box padding (set to 0px)

Share this post


Link to post
Share on other sites
greenfly

There is a good explanation of how to use @media queries here https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
jane

Hi Martin Davies, that is definitely a great resource, thank you for sharing it!

 

Would the following work?

@media 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

.pl-fixed-top {display : none}
.pl-mobile-menu {display : inline-block}
}

Share this post


Link to post
Share on other sites
greenfly

jane - that looks ok to me - give it a try and let us know how you get on ;) 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
jane

Hi Martin Davies,

 

Hmm, I added it but it doesn't seem to be working unfortunately....

 

I tried this instead:

 

 

@media (max-width: 1150px) {
.pl-fixed-top {display: none}
  .pl-mobile-menu {display: inline-block}
}
 
 
^ At least with this version, the fixed navi did disappear however the mobile menu didn't "kick in"

Share this post


Link to post
Share on other sites
jane

I found the following code using Firebug that I think will help me customize when the mobile menu will kick in:

@media (max-width: 768px) {
  #site .navbar .brand {
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 0 0 -5px;
  }
  #site .navbar .searchform {
    float: none;
    padding: 10px;
  }
  #site .navbar .nav-collapse {
    overflow: hidden;
    height: 0;
    clear: both;
  }
  #site .navbar .nav-btn-navbar {
    display: inline-block;
  }
}
@media (min-width: 769px) {
  .nav-collapse.collapse {
    height: auto !important;
    overflow: visible !important;
  }
}

...I changed the max-width and min-widths to 1024 and 1025 so that the mobile menu would be active when viewing the site in landscape mode on an iPad and then would display normally on anything bigger than that.

 

I put this is my custom css but it seems like it didn't work.

 

Does anyone have any suggestions?

Share this post


Link to post
Share on other sites
Danny

We're going to need a link to the site in question, so we can see exactly your issue. 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny

I have just visited that site and it is responsive as far as I can tell, I don't see any problem.

 

However, if you're using custom code and this is not acting responsively, then we are unable to provide support to user created code.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jane

Hi Danny yup, it's definitely responsive it's just that at the resolution 1024px, the fixed navigation takes up 3 lines and overlaps/hides content in the global area. It would be better if instead of going into mobile mode at 768px it started at 1024px. That's why I was trying to find a way to use the media class to achieve this.

 

 

EDIT: Instead of trying to change the point at which the site becomes responsive, I changed the configuration of my fixed navi. The megamenu class was a lifesaver. What I was trying to do was becoming more of a headache and although it would have been nice to figure it out, megamenu gave me a cleaner/better look.

Share this post


Link to post
Share on other sites
Danny

Happy to hear you figured our your issue and thank for informing us.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×