Joomla Templates Club 406,261 posts

[Aratype Friend AratypeJoin date: August 2007Posts: 797Downloads:41Uploads:60 Thanks: 194 Thanked: 98 times in 6 posts]

#194200

I am trying to have the maximum of space in the page and I noticed that due to social icons empty space is in the page.

Is it possible to warp the text around the social icons? I think to have a reasonable margin to the left and under these social icons and to have a full width for the text as for the principal image.

Perhaps it is better to have the modifications in custom.css file.

Thanking you in advance.

My site is: makanez.net

---

Attachments:

1. 

[MoonSailor Friend MoonSailorJoin date: November 2011Posts: 1106Downloads:0Uploads:245 Thanks: 89 Thanked: 248 times in 223 posts]

#520311

You can try the following tweak:

Create a new file “custom.css” in directory “templates/ja_smashboard/css” (if it does not exist). Open this file and add css declaration to the bottom of the file:


.article-content{
margin-right:25px !important;
}
.article-content .addthis_floating_style{
right: -25px !important;
width: 25px !important;
}


Let me know how it goes.

1 user says Thank You to MoonSailor for this useful post

1. Aratype

[Aratype Friend AratypeJoin date: August 2007Posts: 797Downloads:41Uploads:60 Thanks: 194 Thanked: 98 times in 6 posts]

#520350

It is now Perfect for the introductionary text, Thank you!

However, although I have customized the video in my custom.css

.avVideo .avPlayerContainer {
width: 100% !important;
}

It appears in the limited width only :((

Also, the solution does not work on mobile (the most important):

---

Attachments:

1. 
2. 

[MoonSailor Friend MoonSailorJoin date: November 2011Posts: 1106Downloads:0Uploads:245 Thanks: 89 Thanked: 248 times in 223 posts]

#521282

<blockquote>It appears in the limited width only </blockquote>

<blockquote>Also, the solution does not work on mobile (the most important):</blockquote>

I am not entirely sure on this. Could you explain in more details?

[Aratype Friend AratypeJoin date: August 2007Posts: 797Downloads:41Uploads:60 Thanks: 194 Thanked: 98 times in 6 posts]

#521501

In order to illustrate what the page should be I use he article:
http://www.makanez.net/index.php/%D9%85%D9%88%D8%B3%D9%8A%D9%82%D8%A7/153-%D8%A7%D9%84%D9%85%D9%88%D8%B4%D8%AD%D8%A7%D8%AA%D8%8C-%D8%B1%D8%AD%D9%84%D8%A9-%D8%A7%D9%84%D8%A3%D9%86%D8%BA%D8%A7%D9%85-%D9%88%D8%A7%D9%84%D8%A3%D9%84%D8%AD%D8%A7%D9%86-%D9%85%D9%86-%D8%A7%D9%84%D8%A3%D9%86%D8%AF%D9%84%D8%B3-%D8%A5%D9%84%D9%89-%D8%A8%D9%84%D8%A7%D8%AF-%D8%A7%D9%84%D9%85%D8%B4%D8%B1%D9%82

The page now:

The page should be:

You can see how the text should warp the social icons and then align from the right side with the principal image.

You can see also how YouTube should take all the width and not have a margin from the right and left side.

I hope I explain the idea…

Thanking you in advance

---

Attachments:

1. 
2. 

[MoonSailor Friend MoonSailorJoin date: November 2011Posts: 1106Downloads:0Uploads:245 Thanks: 89 Thanked: 248 times in 223 posts]

#521617

You can try workaround below:

Open the “custom.css” file and add css declaration to the end of the file:


.avVideo .avPlayerContainer iframe {
width: 100% !important;
}


[Author]

Posts