I'm trying to make my existing Joomla 2.5 template responsive for mobile device using #media queries.What I'm trying to do is disabling the right bar display for small screen and making the width of of the article content cover 100% of the screen. I tried the following
#media only screen and (min-width:150px) and (max-width:600px) {
.rightbar {
display:none;
}
.container {
width:100%;
}
}
With the above code the right bar disappear in small screen but the width of the container is not being responsive (does not fit with the screen size).
Now I'm confused weather Joomla 2.5 supports responsive for existing templates or I have done something wrong with #media queries?
Joomla takes no part in how CSS works. CSS is a styling language and Joomla is a CMS written in PHP. The templates are HTML based just like your average static site, therefore any CSS you write should apply. The reason why your container might not be extending is there may be a parent element wrapped around your container with a set width or the container class is being overridden somewhere else. The best thing to do would be to inspect the element using Chrome Dev Tools or Firebug. This will show you everything you need to know ini this scenario
Making existing template responsive is not easy task. You could give a try to this extension for joomla http://storejoomla.org/extensions/responsivizer.html
I tried this component on several sites, it lets you build a mobile version of your site using a mobile ready layout only when mobile devices are detected.
Related
I built website on divi for a while now. I tried many times to change Divi built in responsive settings.
Most of my bugs are on effects, like moving up and down according to screensize; when it work out on a 13 inch it's totally messed up on a 27 inch
But my main problem is that the phone version goes from 320px up to 768px which is not adapted for little tablets.
I'ld like to change that built in breakpoint settings to something like 500px max for mobile version and then have a little tablet version from 501px to 1099 and have a classic pc version from 1100px to 1650px and then have a big screen setting... That would be nice to make it perfectly responsive.
Do you have any idea ?
If there is no solution through divi builder, is there any chance to do something through CSS ?
I've tried to reach Divi's expert on Malt but they were not able to answered me.
I've tried some CSS but it didn't work out. I know that it is possible to customise some sections, row, column to a specific screen size and sometimes I managed to do what I want sometimes thanks to that.
I also tried to look at the .php files but I've to say : I'm not an expert... and didn't find anything.
I was expecting to be able to customise divi's breakpoint with my own value.
To do something like that : I'ld like to change built in breakpoint setting to something like 500px max and then have a little tablet version from 501px to 1099 and have a classic pc version from 1100px to 1650px and then have a big screen setting... That would be nice to make it perfectly responsive.
I've been having the same problem for years now. Divi doesn't really seem to care at all about the fact that responsiveness has become a lot more complicated than just two breakpoints. I haven't found any helpful plugin or extension that's free.
You might want to look at this one: https://www.peeayecreative.com/product/divi-responsive-helper/ I haven't bought it myself but it seems to have everything I want to customize the breakpoints.
But still today I just use CSS in the Theme Options of Divi to create my own breakpoints.
For example, the menu changes to a hamburger at 980PX but this screws it all up 'till you get to about 1200px. So in the CSS is use this:
#media(max-width:1200px){
.et_pb_menu__menu {
display: none !important;
}
.et_mobile_nav_menu {
display: block !important;
}
}
Also, Divi tends to hide empty columns, even if the heave a background and a set height. So I always give those columns a class of divi-hidden-100pr or divi-hidden-50vh depending if you can set the height on percentage or if need need to set the height yourself. Then in Theme Options this is my CSS:
#media(max-width:1200px){
.divi-hidden-100pr,
.divi-hidden-50vh {
display:block !important;
}
.divi-hidden-100pr {
height:100% !important;
}
.divi-hidden-50vh {
height:50vh !important;
}
}
In this case the heigt is 50vh or 100% you can set the 50vh to whatever you prefer.
Maybe the reason why your CSS didn't work is because you did use !important
I know that it's a CSS crime to use this, but Divi doesn't seem to care and uses this a lot. So if you don't use it, your CSS probably won't work.
Problem however with this custom CSS, you'll still get you're margins, paddings, font-size etc set for the desktop. So pretty soon you custom CSS in Theme Options wil grow bigger and bigger and you'll have to change some desktop design settings to make your responsive custom CSS work
For example:
If you want a different font-color on a device you should set the font color for desktop in the custom CSS part of the module, not in de Design tab. If you set it in the Design tab it will bet set with !important and no matter where you put you're custom responsive CSS, it wil always be overruled by the Divi settings.
hope this helpen you a bit. Hope Divi will realize soon that there's more than 5 devices out there with different sizes.
There is a lot of stuff out there on making BS3 non responsive but it all seems to focus on LESS variables. I'm using static CSS though.
http://getbootstrap.com/examples/non-responsive/
http://bigwilliam.com/turn-off-responsive-behavior-for-bootstrap-3/
Steps 1 (remove viewport) and 2 (static container width) are easy enough. But how do I set the media query breakpoints in CSS?
There's an option in Bootstrap to customize your download of Bootstrap CSS to fit your needs. If you press the link customize along Bootstrap's website, it will take you to a page that lists all the components and utilities that come included with the default download of Bootstrap CSS. You can add/remove any of these items to create a version of bootstrap that fits your particular needs.
For you case, remove the following options (Under Common CSS):
Print Media Styles
Responsive Utilities
There is also a section where you can customize and compile the LESS variables into a custom .css file. The one you could consider changing is the Media Query Breakpoints settings, but there are lots of customization options for you to browse through.
Take a look here at Bootstrap/Customize to see all the options you can change, and hopefully that will help!
set minimal width to html or body element, in that way page won't resize if browser width is less than min-width specified. but whole point using bootstrap is to easily develop responsive websites, so you are doing something terribly wrong if you want not responsive bootstrap.
html { min-width: 1000px; }
Ok, so I am supposed to create an image gallery. The way I've envisioned it was for it to have a menu on the left, with the images appearing on the right, when selected from the menu. The menu would feature small thumbnails, and .... yeah, I wanted the site to feature a Responsive Web Design, where it would adjust itself should it be opened on a mobile device, but sadly I feel a tad overwhelmed by that.
What is my best way to approach this? I see some sites mention tips like
-make the mobile version first, and go from there
-be sure that the fonts change size depending on the screen size
And quite frankly, I don't even know how to make sure that my images are in the right size........ can anyone help? PLEASE!
Please check media query on CSS3 : http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You can set the size of the pictures with this... You can make a simple css rules for desktop and make mobile css rules for mobiles by using
CSS FILE:
// CSS RULES FOR DESKTOP
#media screen and (max-width: 300px) {// CSS RULES FOR MOBILE}
But I recommend you to include 2 css: one desktop and one mobile to be more clear.
I have built a page with interactive world maps plugin at http://www.parentcenterhub.org/find-your-center/
All other pages of my site are responsive except this one. What CSS should I add and in which file so that this page is also responsive on all devices (Android,iPhone, tablets, etc.)
I don't know if twentythirteen is responsive by default, but that shouldn't be a problem. You should add media queries in your css file, specifying specific widths where your page 'breaks', and add css specific for that width.
For instance for mobile you'd have
#media only screen and (max-width: 767px){
/* css goes here*/
}
And for every major element you'd specify how it behaves when the width of your screen is less than 767px.
There are lots of tutorials on line, so check them out.
I am using a modified version of the Quintus Theme in a self-hosted WordPress site. The site appears and works great on all browsers that I have tested, a windows tablet, and a windows phone. When I view the site on an iPad running the latest iOS version, the site is being squished to what I would assume is between 700-800px wide... all except for my custom header and slider. The blog title, menu and everything contained within the #page is not showing full width. I have beat my head against a wall trying to locate this needle in the haystack to find what could be causing this to display short of the width. I even tried some iPad emulators, however all those display the site perfectly. The actual iPad is not. I am not sure how to inspect the elements on an iPad since there are not any options on an iPad broswer to do so. Can someone please help me?
Blog... http://blog.modafabrics.com
Using the chrome emulator, i can't see any responsive CSS being used.
Your big slider area in the middle is set to a width of 1000px, whereas a iPad's resolution is only around 1024 x 768px. When in portrait you will be missing almost a quarter of the screen size.
The best way around it would be to start using percentages once you hit 1024px and to start making it responsive so it works on all devices, mobiles included.
Have a read on the MDN about media queries which are what are used in responsive CSS.
Link: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
EDIT
Ill see if i can get you started on making things a bit better.
These are all changes needed within your css which need to be applied within the media query for tablets
#page {
overflow-x: hidden; // stops the page being slid to right
}
#primary {
float: none; // removes the float style from the element (things can go above/under it otherwise)
}
#content {
margin: 0; // makes it full width
}
You will then need to decide what your going to do with the sidebar e.g. hide it or drop it below the content.
That should get you started on it. The best way to continue would be to use the chrome inspect element tool, you can then dig into each layer of the template and see why different things aren't re-sizing.