Resize

yodam1

Hi,
I've noticed using JomSocial internal positions that the side modules are too large (the image of Hello me module has a gap on right).

How can I change with css this size to make it correct also with the center (the component)?

also when I resize I have strange graphics. Probably the template (JA Events II) has intermediate situation before changing from computer to tablet to smartphone:

Thanks!

Ninja

yodam1
Hi
Can you tell me in which device you tested ? As i can not see all the issues :
For the cover image, add this code in custom.css file of the template

.joms-sidebar .joms-hcard {
  
    max-width: 460px;
  
}

Mobile phone :
Ipad View :

yodam1

Hi,
Please remove pictures from your post.

The problem is on intermediate resize. Try to resize your browser window. Before changing from PC to tablet and to tablet to smartphone you will see those messy pages. Not test on those devices, simply resize window on pc

Thanks

Ninja

Hi yodam1
Please share the device name as there is different view in real devices.
Like if you will check it in your own mobile, there will be no issue.
I added screenshots to show the pages has no problem on mobile and tablet views like in Ipad you can test it, not via resize browser.
The style is built based on the device sizes.

yodam1

Probably it's fault of my English (sorry).
Look at my site and gradually resize the browser window. The device it's a PC

Thanks

aman204

yodam1 Look at my site and gradually resize the browser window

Based upon initial impressions after resizing the browser window and as part of workaround, Try add this to custom.css file :

.joms-hcard{max-width:430px !important;} /* adjust value accordingly */

Regarding elements breaking in header area when resizing to smaller size, The same is happening due to ample menu items added which are unable to accomodate with smaller screen as you have other elements also seen in header block which are positioned alongside each other.

It is suggested to kindly follow suggestion here which would help elevating user experience also 🙂

For example workaround, Try this to custom.css file and adjust width value accordingly :

.header-trans .navbar-default{width: 60% !important;}

however that would help to certain extent

yodam1

Hi,
1) About "Regarding elements breaking in header area when resizing to smaller size, The same is happening due to ample menu items added which are unable to accomodate with smaller screen as you have other elements also seen in header block which are positioned alongside each other."

Is it not possible with css to change from the pc to the tablet to the smartphone visualization before the elements breaks?

2) About:

.joms-sidebar .joms-hcard {

max-width: 460px;

}

is it possible to make this smaller and have a bigger area on component middle part?

Thanks!

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