I saw this page http://demo.smartaddons.com/templates/joomla3/sj-joomla3/ and was wondering how to do the same footer, when you decrease the size of the screen, the elements remain on top of one another.
I looked at the source, but did not understand me.
I do not want to use Joomla, I do pure CSS and HTML.
tks
The footer you are talking about mixes several css properties. But the most imporant to get the "responsive effect" are floats and media queries
You will find inforamtion about media queries here and float here
This is called a responsive page.
Using CSS3, you can set limits to the page width. And if the page reaches this limit, the style changes to accommodate the new size. In the example that you showed, there is a limit right where the screen reaches 1200px in widht and another one when it's in 979px and below.
you can set this by declaring this in your CSS:
#media (min-width: 1200px) {
/* Your code here */
}
#media (min-width: 979px) {
/* Your code here */
}
Related
I'm designing a webpage, and extracted this portion into a fiddle:
https://jsfiddle.net/h703xqbt/16/
I'm not being able to avoid several layers of tags instead of a single line when the screen resizes to a smaller value or when using a movile device.
I'm trying to make it collapse into a single button that shows a dropdown list with all the tags that don't fit the screen.
I'm familiar with media queries such as
#media (max-width: 600px) {
#button1 {
display: none;
}
}
but i'm not sure how to use it for this purpose.
I've seen some webpages that do this but it becomes very difficult to follow them as they have an enormous amount of details, and can't find the fundamentals.
Is this possible using only css? (i'm trying to avoid js and jquery as much as possible, for my own reasons)
Simply give the tabs a width of 100% when the screen size is a certain width :)
#media (max-width: 600px) {
.tab-link {
width: 100%;
}
}
This way, the tabs will stay next to each other on wide screens, and occupy the full width on mobile devices, stacking on top of each other.
You can always change the 600px media query to a smaller / larger width, and give the tabs themselves a width of something like 50% if you would like two tabs next to each other.
I've created a new fiddle showcasing this here.
Hope this helps! :)
To put it simply, when decreasing the size of your browser window, for mobile device view, the top buttons get pushed to the left, underneath the clients name and finally ends up in a Menu subfolder. Not being a web designer, although I am trying hard to learn, what I would like to see is the Menu subfolder react a lot sooner, before the button end up under the clients name. Being a free template of which I am trying to redesign, I looked under style.css and responsive.css but I'm not sure what I should be looking for. Any help with this matter would be very much appreciated.
http://landonmusicgroup.com/victoria_update_test/index.html
Thank you!
I would suggest smaller icons in general with less padding on the left and ride sides. This will create smaller icons that are closer together. You would likely have to scale the browser to ensure that the icons all fit before the media queries break to a single menu button at 767px.
The more efficient option would be to adjust the icons size and the logo size depending on the media query. For example, you have a media query in that template from around 980px to 1300px. If possible, in your template adjust the logo sizing and icon sizing to make sure that within that range, everything fits.
If you like the bigger icons, that is okay, you just must make sure that the bigger sized icons and logo do not take effect until after the window is over 1300px. Anything between 980px and 1300px is going to require smaller icons, smaller logotype, or a new arrangement altogether to avoid the line break.
Media queries are used like so:
//This section affects anything bigger than 480px
#media screen and (min-width: 480px) {
body {
//insert width and height
}
}
//This section affects anything bigger than 767px
#media screen and (min-width: 767px) {
li {
//insert width and height
}
}
//This section affects anything bigger than 980px
#media screen and (min-width: 980px) {
li {
//insert width and height
}
}
//This section affects anything bigger than 1300px
#media screen and (min-width: 1300px) {
li {
//insert width and height
}
}
I came across this while looking something up for media queries. always like learning new things and couldn't find anywhere on the net to explain this type of markup. this is from Expedia's responsive web design shown by litmus.
https://litmus.com/scope/z1xdodxbzane
#media only screen and (max-width: 600px) {
*[class="FlexWidth100"]{width:100% !important; height:auto!important; line-height:normal!important;}
Basically
*[class="FlexWidth100"]
is just same with
.FlexWidth100
selector
* or called as wildcard in CSS. This is use for select all elements within the DOM.
So basically, your code will target all elements with class FlexWidth100 in the DOM and apply
{width:100% !important; height:auto!important; line-height:normal!important;}
when the screen's width is less than or equal to 600px
It's a css selector which targets all element on the .html page with the class .FlexWidth100.
This is a responsive cascading style sheet, that basically says the following in plain english:
#media only screen and (max-width: 600px) {
Target all screen media (laptop screen, desktop screens, smartphones and tablets
screens)
Then it says, if and only if the max width of the webpage is 600px, then apply
the following styles, such as {width:100% !important; height:auto!important;
line-height:normal!important;}
You can add any styles you want under there, such as:
#media only screen and (max-width: 600px) {
*[class="FlexWidth100"]{color: green;}
This technique is generally used to target screens with different sizes; you might not want to write a single style sheet for every media type or screen size; you write one style sheet then, within that same style sheet, you specify different styles for different media types and screen sizes.
So, when I am looking at your website from a desktop, it looks one way, but when I look at the same website, from a mobile device for instance, it looks a different way.
Hope that helps also, try looking at Facebook from your desktop or laptop, then look at it on your mobile device and you'll see that it looks different.
Finally, to see if a site is using a responsive style sheet, look at it from a wide screen, like desktop, then hold one corner of the browser and slowly re-size the browser window to a smaller screen size, and you'll see different styles being applied to that webpage instantly only if that site is using a responsive style sheet.
Hope this helps mate!
I am trying to convert my website index page to be adjustable. I want the whole conent of the page to be adjustable. By adjustable I mean if some one opens the page in a new window and try to resize the window by dragging it with mouse, the content of my page also adjust itself according to the width and height of the window.
Is it possible using only CSS or I have to use some javascript as well?
What I need is something like [this][1]
Any help or advice will be highly appriciated
Thanks
What you want to do is to Responsive Design
For example you can make your css target a particular devise as:
//General css
/*MEDIA BETWEEN 300 - 1000PX */
#media all and (min-width:300px) and (max-width:1000px)
{
}
/*MEDIA BETWEEN 621 - 800PX */
#media all and (min-width:621px) and (max-width:800px)
{
}
/*MEDIA BETWEEN 300 - 620PX */
#media all and (min-width:300px) and (max-width:620px)
{
}
Some of the pages that can help are:
http://googlewebmastercentral.blogspot.in/2012/04/responsive-design-harnessing-power-of.html
http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/
NOTE: use em and % instead of px and pt
Just set relative widths on stuff, like width: 75%; or width: 60%; instead of width: 450px; or width: 650px;. This will work for you if you just need elements to get narrower/wider as the page is resized.
If you want major layout changes (like on the demo you provided, the top menu bar becomes a sidebar when the window becomes smaller), you'll need some Javascript to switch stylesheets based on the width of the window. Hope this gives you some ideas!
What you are talking about is called "Responsive Design".
A responsive site works more with percentages instead of pixels as well as something called "media-queries" in css.
There is a great article about it here:
http://www.alistapart.com/articles/responsive-web-design/
Check out this page:
http://new.brixwork.com/realtors/real-estate-website-features
Below the big computer screen, the images and text blocks alternate in a staircase design.. on one div the image is on the right, on another, on the left. And there are 4 blocks.
I'm using the Skeleton framework (www.getskeleton.com) for a responsive grid design, so the grid re-sizes on the viewport queries, which is great. however this poses a problem on iphones or vertical view on iPads when the image & text boxes shuffle to get on top of each other.
Instead of
image text
text image
image text
text image
I get
image
text
text
image
image
text
text
image
Because of the order by which the objects were typed out in my HTML.
So the question is, is there a clever way to re-position items via CSS? I already use media queries like this:
#media only screen and (max-width: 959px) {
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {
}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
}
Any ideas? I want to do this without resorting to jQuery to detect the window size and re-size them if I can avoid it. I can't use PHP to alter the DIV orders on "echo", because I want the re-shuffling to be done effectively if a tablet is taken from horizontal to a vertical position.
Where there's a will, there's a way! The big drawback with using a framework that uses semantics like "six columns alpha" and "ten columns omega" is that they create an expectation for visual ordering. The six columns are on the left, the ten columns are on the right, and the alpha/omega naming conventions affect margins because the order is right in the markup. You have stumbled across an unexpected use case for the author, I'm thinking.
(Incidentally, your ten column area also contains images that are overflowing their containers; ie. they're not being resized)
The straight goods:
My honest advice for future maintainability is to learn from skeleton, take what you want from it understanding what its different classes do... and re-invent it.
For example, what you have on your main page are a series of feature containers. The markup should look consistent, like this:
<div class="featurebox">
<div class="media">Image, slider, or other visual interest items here</div>
<div class="items">Text of items of interest</div>
</div>
<div class="featurebox">
<div class="media">A different image, slider, etc</div>
<div class="items">More text of items of interest</div>
</div>
And then you can style these to create the left-right effect. The key here is in the selectors. By floating right instead of left for divs inside every other featurebox, our effect is easily achieved:
.featurebox { width: 600px; overflow: hidden; clear: both;}
.featurebox div { float: left; }
.featurebox:nth-of-type(odd) div { float: right; }
.items { width: 200px }
.media {background-color: grey; width:400px; height: 100px;}
Fiddle: http://jsfiddle.net/7qRfh/
The problem in modifying what you currently have is that this doesn't really fit skeleton's expectation of left-to-right stacking of floats. If you're willing to say "phooey" you could identify your containers, target every second one, and flip the .columns float orientation. You will also need to override omega and alpha class behaviour so that omega is actually acting like alpha and vice versa. A mess, in my opinion, but it'll work.
The hack
I just had a fiddle around here and I think I closed it. Can't find the URL in my history so I may not have saved it first. :-/
But no matter. It boiled down to this: you can do what you need to do with your current markup, but the changes to CSS are even more extensive and become nutty.
The container already has position: absolute, so you have to unfloat the "six" and "ten" columns, position them absolutely, with "ten" on top and "six" on the bottom. The big issue is that do to it easily, the container as well as the "six" and "ten" all need to have height set on them. Absolute positioning takes an element out of document flow, so without height it just becomes an overlapping weird mess.
Honestly, if you insist on skeleton the way it is, and the markup the way it is, the most reasonable hack actually turns out to be JavaScript. If you already have jQuery on your page, all the easier.