Resize

Ninja

yodam1
Hi
in each tempate the style is defined with respect the to standard screen size of different devices.
This is why i asked you to check the site in different screen size, not via re size the browser.

On the header there are alot of menu items and module, when you resize the browser the width decrease and the menu item will become in 2nd row and same happen with the modules too.

What i can suggest on this is you can change the menu breakpoint, so the mobile menu will start showing.

yodam1

Hi,
Yes but how to change this breakpoints so the mobile menu will start on bigger width?

Thanks

Ninja

yodam1
Hi
open file "/less/variables.less" in template "ja_events_ii".
Find

// Point at which the navbar stops collapsing
@grid-float-breakpoint:     @screen-md-min;

Replace it with

// Point at which the navbar stops collapsing
@grid-float-breakpoint:     992px;

Now compile less to css to override this change in css files : http://prntscr.com/npqfgy
Once done, clear cache and check.

You can set the 992px value as per needs on which size you want to start the mobile navigation.

Regards

yodam1

THANKS! Please answer Aldo to question 2 about how to have smaller module on left and big on middle instead of having a max-width 460px

Thanks!

aman204

yodam1 Aldo to question 2 about how to have smaller module on left and big on middle instead of having a max-width 460px

Not sure as to what you wish to derive here. Kindly elaborate or better yet, you may provide screenshot marked with annotations showing as to what you wish to derive

Although, I assume that adding max-width should derive the purpose of image spanning across the available width

yodam1

I want the module large as image of hello me and so the jomsocial stream part more large. If it's not clear I will do a picture

Thanks

aman204

yodam1 Hi

Mostly, A screenshot marked with annotations is worth a "Thousand Words" which is the power of Visual Content making it explicitly clear and pointing as to what you wish to exactly derive henceforth would be appreciated if you could provide the same 🙂

yodam1

Hi,

look at this:

aman204

if it's not clear I will do a better screenshot

Thanks!

teitbite

yodam1 Hi. Please try with this code added to css:

.joms-sidebar {
    width: 20%;
}

.joms-main {
    padding-left: 14px;
    width: 80%;
}

aman204

yodam1 Hi

To derive results per screenshot marked with annotations, Try add this to custom.css file and adjust width value accordingly :

.joms-body .joms-sidebar{width: 28.1966% !important;}
.joms-body .joms-main{width: 71.8034% !important;}

Majorly, Do ensure that the total value whilst changing it, equates to 100%

yodam1

Hi,
It's starting to work. The part:

// Point at which the navbar stops collapsing
@grid-float-breakpoint: 992px;

changed things but those widths where all is a mess are continuing. Considering you have admin password can you do that for me? now I'm using 1200px instead of 992px but you can use what you think will solve the problem

Thanks!!

aman204

yodam1 Hi

Kindly review as your admin details added in edit fields arent working so as to take closer look and returning with error as shown in screenshot

Nevertheless, Try add this to custom.css file and adjust values accordingly:

@media screen and (max-width: 1200px){
.navbar-default .navbar-toggle{
	    position: absolute !important;
    right: 10px !important;
    top: 0 !important;
}
.t3-header-wrap .head-actions{
width: 50% !important;
margin-top: 30px !important;
}
	}

Kindly ensure to clear your browser cache if changes dont reflect.

yodam1

aman204 Hi,

The edit fields are correct (I did copy and paste to try). Probably you used utente1 that is a common user (use the user that end with admin).

1) now the LESS modify is already useful?
2) The situation improved but at some resize I have this "bad situation" where login is too near to main menu:

I think it's better if you access my site and do the final fix or I risk to make it messy

Thank for you precoius help!

aman204

yodam1 You may check now. Have added some further media query CSS to get the positioning to be more appropriate

yodam1

Hi,
1) Something more need to be done:

while I resize become like in picture. That's too much vertical distance

2) On register modules the send password,etc have not a good distance or something that make those anchors more visible/separated

Thanks!

Ninja

yodam1
Hi
For first request the login is below due to this code from your custom.css file


@media screen and (max-width: 980px){
.t3-header-wrap .head-actions{
margin-top: 50px !important;
}}

Decrease the value or remove it to decrease this space.

In this thread there is code suggested to you for resize Jomsocial width
kindly replace the code with this

@media screen and (min-width: 992px){
.joms-body .joms-sidebar{width: 28.1966% !important;}
.joms-body .joms-main{width: 71.8034% !important;}
}}

So it will not break mobile layout.

The distance of module is same like PC http://prntscr.com/nqqjy3
In your screenshot you compare two different items.

Kindly open a new thread for each different question related to topic.

Regards

yodam1

Hi,
I've tryed but it's not working so I suppose I'm not understanding. Now the top menu transofrm to a "3 horizontal lines menu" and move in many places when I resize the window (and at the end disappear). This is the code in my custom.css:

@media screen and (min-width: 99200px){
  .joms-body .joms-sidebar{width: 28.1966% !important;}
  .joms-body .joms-main{width: 71.8034% !important;}
}}
@media screen and (max-width: 1200px){
    .navbar-default .navbar-toggle{
	    position: absolute !important;
            right: 10px !important;
            top: 0 !important;
    }
    .t3-header-wrap .head-actions{
           width: 50% !important;
           margin-top: 28px !important;
     }
}
/*
@media screen and (max-width: 980px){
.t3-header-wrap .head-actions{
margin-top: 50px !important;
}}
*/

Why 99200px? it seem a really big number. I think it's better if you access to my custom.css and do this update.
Also the LESS update is already necessary?

Thanks!

Ninja

yodam1
Hi
Sorry there is 992px value if you want it to apply for a lower screen you can change it with 768px.

It will apply the code to work not for mobile screen so that width of sidebar is not very low in mobile.

If you want the mobile menu will show early, in that case it required to make changes in Less file first and then compile less to css.

yodam1

Hi,
I've tryed 768px but it's not changing the situation. At the minimum width of resize the distance from "3 horizontal lines menu" and login it's really big (On chrome works, on Firefox not works). Also in a middle width resize the "3 horizontal lines menu" it's on left and login on right.

Thanks!

Ninja

yodam1
Hi
This button is showing down only for some mobile on which the screen width is very low, and it can not fit all 3 items in one row.
Its not issue of template, you have added a bigger logo that use this space for very small screen.
In normal mobile screen it shows fine Deleted