Joomla Templates Club 406,261 posts

[vividphoto Friend vividphotoJoin date: July 2007Posts: 7Downloads:0Uploads:4 Thanks: 6]

#186135

I’m confused, I tried everything to change the width of the above module positions but with no success. Do you have to do changes in more then 1 file??

The issues:

1. If you check the Login and the Language flag you’ll see that they are in a different row. Not sure how to change the width of the top-login to fit both modules.

2. If I remove a few of the social icons, the Search stays the same width. It does not expand to fill the container. I expected to fill the 100% of the space on the right.

Can someone help me with this.

Thanks in advance.

---

Attachments:

1. 

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#487662

Hi Vividphoto,

Yes, you must do more css customization to get it right.

1. If you check the Login and the Language flag you’ll see that they are in a different row. Not sure how to change the width of the top-login to fit both modules.
>> Please post your site url, its not possible to guess the issue by looking at the image.

2. If I remove a few of the social icons, the Search stays the same width. It does not expand to fill the container. I expected to fill the 100% of the space on the right

.head-search .input {
.........
width: 150px;
}
>> yes, it does not auto, so you must change width value in this case.

1 user says Thank You to HeR0 for this useful post

1. vividphoto

[vividphoto Friend vividphotoJoin date: July 2007Posts: 7Downloads:0Uploads:4 Thanks: 6]

#487856

Hi HeR0

The site url is http://www.quebecolympicwrestling.ca/new_2/index.php/en/

Thanks for info about #2. I actally already tried to change the value and even after clearing and purging catche it stays the same width.
But after a little bit of frustration I decided to play with template-responsive.css file and leave template.css alone. And there I changed the width below to 200 and it worked. huh… Tons of time spending playing with the wrong file.
@media (max-width: 1199px) {
.head-search .input,
.head-search .input:focus,
.head-search .input:hover,
.head-search .input:active {
width: 100px;
}

Cheers

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#487967

Dear,

1. You could have some change css rule in less/mod_jalogin.less :

.top-login ul {
margin: 0;
position: relative;
}
to
.top-login ul {
margin: 0;
position: relative;
float: right;
}
– Create new rule and add it into

.mod-languages{
float: right;
}

2. You need change in file less/style.less

After done 2 steps, please go to template setting and implement Complie less to css function.

Regards

1 user says Thank You to HeR0 for this useful post

1. vividphoto

[vividphoto Friend vividphotoJoin date: July 2007Posts: 7Downloads:0Uploads:4 Thanks: 6]

#488406

Awesome. It works the way I need it.

[Author]

Posts