how to make a full screen width for mobile - joomla

I think that joomla 3.4 is responsive but I dont know why I get more width in my screen device on my website any help to be full width screen
thanks alot

It's hard to say withouth a URL, you can use a tool like Firebug or similar for inspect your source code in your browser.
A tool like this will give you information about the selectors and the path where they are located, the line number and the name of the file that contains this selectors. Once you have this you can add or change the values for margin or padding.

Related

Metalsmith Blog using FullPage.js

I am trying to set up a simple blog using Metalsmith and the fullPage.js library.
At the moment I have a problem where the height of the section divs upon intial loading are roughly 2 times the correct size.
Ie. when it initially loads the height in the console reads 1563px.
The odd thing is that once I resize my browser window in any way ie. make it larger or smaller, the div(class='section') height will then resize to its correct height in the console and in the browser, and everything is laid out correctly again (with regular sized divs as opposed to the super tall ones that were there previously.
This initial height inconsistency is causing many issues with alignment in my layout, such as the prev/next arrows as well as the div content.
here is a link to my public git repo for this project.
If you want to run this locally you can pull it down, run npm install, then run nf start. You will then be able to access it at localhost/3000.
If anyone has any suggestions that would be much appreciated.
Thanks.
It is not ideal to just public your source. A link reproducing the error would be much better.
In any case, I believe yours is a case of missing the compulsory DOCTYPE declaration at the very start of the page.
Take a look at any examples of fullpage.js. They all have it.
Add this in the first line of your resulting HTML files:
<!DOCTYPE html>

Joomla Front-End User Editing Content in One Area

On my website, I have an area where a user can create a team profile page. On the top of this page, is a header area that is 960px width x 170px height. This header, I would like to make a customizable area (like a user WYSIWYG) for the users. They must add an image, but I would like for them to be able to size this image and place it wherever they desire. They can also put text at whatever size and location in this header they want, if their image does not take up the whole header.
Does anybody know if this is possible?
Thanks!
Yep, it's possible, but You will need to do some custom work for that kind of module. It is simple, but still i don't think You will find some free versions on JED

Facebook Like Box hides Stream content if Show Faces disabled

I've been checking into some issues with Facebook Like Box plugins on websites my company manages, and have seen different behavior in the past two days. Can anyone help to explain if this is more likely an issue with Facebook, or the target profile/page settings?
I'll focus on the more obvious one here.
When the 'Show Faces' option is disabled and no Data-height is explicitly specified for the plugin, the area to display the Stream activities is reduced to 0 and all that is displayed is a double horizontal line.
Working from the Developers.facebook demo page
(https://developers.facebook.com/docs/reference/plugins/like-box/)
1) Enter a valid facebook Page for the address
-- Defaults should display with width=292, height blank, and all other options checked.
2) un-check 'Show Faces'
-- Like Box shrinks to only display Header, and the Social Plugin footer.
3) Enter a Height value ( anything above 150 px should display some area of content and the vertical slider again, but with the Like Box total height restricted to the height entered)
(I wanted to post this to Facebook as a Bug report, but could not find the correct steps to do so.)
Facebook must have changed something. This only seems to be affecting the HTML5 implementation of this plugin. Some other sites which I maintain, which use the iframe implementation, do not seem to be affected.
I just added a fixed 'data-height' attribute to the 'fb-like'box' div of the HTML5 implementation of the plugin - seems to have done the job.
Looks like they have changed (or broke) the default value for height from "300px" (I think that is what it was) and replaced it with the 120px which leaves no room for the stream. If you add faces it ups the default value and leaves room for the stream.
If you change the height of the box to say 600px (depends on what you want) then even with faces off it will show the stream.
For example if you goto: https://developers.facebook.com/docs/reference/plugins/like-box/
Then turn stream on and faces off (even on the default site of FB Dev) it will still hide the stream with no height specified. Then change the height to say 600px the stream will appear.
Feels like less of a bodge than the other method that Nathan mentioned (which I couldn't get to work anyway! :( LOL)
Hope this helps someone else. :)

Rockettheme: Kinetic - making banner full width

I dont know what kind of success i'll have from this post but struggling at the moment to get a reply on the rockettheme forums.
I have downloaded this template (Kinetic) from Rockettheme.com (demo below;)
http://demo.rockettheme.com/?template=kinetic
I have changed it to come out looking like the link below;
http://evolve.gen.nz/
However im really struggling to differentiate the footer from the rest of the website. Im looking at changing it to a light grey however I cannot make it stretch right across the website as the footer is located in the container and stops at either edge of the container.
is there anyway to make a footer colour go right across the page?
(the same as the following website, if you go down to the bottom of the page and you will see a dark grey, charcoal colour)
http://www.colmanweb.co.nz/websites/refuge/
Any ideas on how I could get this achieved?
Thanks
You just need to edit the index.php file of the template, should be at templates/kinetic/index.php roughly. If you head to the bottom, you will find a div with rt-footer. You will want to pull this entire div statement out and paste it outside of the div with an id rt-surround. Your best bet is to find rt-debug and paste it just above.
I run a lot of sites off the base gantry template from Rocket Theme and do this type of thing often, so it should work.
Two issues you may run into. If you don't get the right closing div tag, you can get some weird output if the divs aren't closed properly. So be careful and use the indentation to help you.
Second, there may be some css styling that is specific to the old heirarchy. I doubt it in this case, but it can happen. You may have to fix some of the css styling.

How to extend the sensible area around active area (hyperlinks) in Firefox?

At which level in Firefox the active zone around active areas (text and image hyperlinks) is defined ? I would like to experiment ways to extend them to ease the use of touchscreens for the web...
After discussions with some Mozilla folks, I tried to implement a solution using javascript with a Greasemonkey script available at http://www.splitted-desktop.com/~flepied/touchscreen/touchscreen.user.js. It tries to find the nearest link when you click on something that is not active.
The only way I know of is via the CSS property padding.
This is mostly not browser-specific, but determined by the layout information (in html or css). Basically, the area that the "link" element occupies is the clickable area. If you need a larger area, you have to make the element larger .. increase the text that is clickable, increase the font-size, increase padding (which might look strange).

Resources