Joomla Templates Club 406,261 posts

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1006830

splitting this from the prev topic

I cannot resize the text in the boxes in position 1, 2 or 3. The text in position 3 is over running the box and if resizing or viewing on a small screen it will not adjust. I also cannot align the bottom of the boxes in pos 1 2 and 3, so if one has longer text it will only adjust the size of one box

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1006886

Hi
You can change the position size from the template options > Layout Responsive layout > Extra small > Drag and move the position to 12 for small devices.
Hope it helps.

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1007430

hi pankaj that aligns the width but its the length that seems to be the problem. Additionally the boxes combined equal 12 so that all 3 take up the length of the screen but the text of the last box over runs but i cant see why as it could easily fit in the box

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1007432

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1007470

Hi
I saw you turned off the Responsive mode that creates the problem. Kindly Turn on the responsive mode, compile less to css and check.
Take a backup of a site before apply changes.
And if still, you have problems post the screenshot of issue.

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1007688

this problem exists even with responsive mode. Additionally I would like this to work in both modes, can you advise how it can be resolved?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1007729

Hi
Can u please provide the screenshot of problem. its very hard to assume the issue without proper details.
Kindly send me screenshot of problem and the device in which you are getting the problem, It will help me to check this problem.
Regards

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1008039

refer to the attached doc which shows examples of the boxes and text coming out of alignment.

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1008043

attachment

---

Attachments:

1. boxes-error.pdf

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1008161

Hi
You can change the position size from the template options > Layout Responsive layout > Extra small > Drag and move the position to 12 for small devices.
I applied same on your site and now there is no overlapping.

Regards

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1008631

Hi Pankaj,
thankyou that worked perfectly for the responsive modes, however the issue still occurs with responsive mode turned off. Would there be another way to resolve as the positions cannot be drag and moved in the standard module positions mode

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1008669

Hi
No the Drag and move is only for Responsive layout.
In the Non-Responsive view you will have same view : http://prntscr.com/e5gdzx

Regards

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1008901

Hi Pankaj, Sorry I should have worded my question better. In your fix it worked well when in responsive mode, however in non-responsive mode the 3 boxes are different height and the text in the third box is misaligned with the box and comes out to the right.

I can see in the variable.less that the screen size for non-responsive is 980px (same as medium responsive) and responsive large is 1200px.

refer to the attached screen shot, the large rsponsive version of the site displays perfectly, the unresponsive 980px version does not display correctly.

What do I need to do so that in any screen layout :

1. the box heights are all aligned
2. There is no text over running the boxes?

---

Attachments:

1. boxes-error-1.pdf

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1008931

Hi
Its because the table width is 328px that is larger then the module container width
you can add below code in custom.css file to make it 100%

table {
    background-color: transparent;
    width: 100%;
}

Hope it helps.

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1009352

thanks that fixed the text over running in the box.

The only issue outstanding is the vertical alignment, is there a way to make all the boxes the same height?

[Author]

Posts