I have developed a Responsive website in Joomla 3 using the protostar template as default. Its a responsive page. I have created Main menus. I am trying to resize the Screen to 480 (mobile) the menus are not changing into Drop Down.
NAV-COLLAPSE DOESN'T HAPPEN. even though i have given # media.
If i Change the template to ISIS Template nav-collapse works.
my css:
#media (max-width: 480px) {
.nav-collapse {
-webkit-transform: translate3d(0,0,0);
}
Related
I am trying to make the back button icon white in the toolbar of my Ionic 4 app. I have added:
ion-back-button {
--color: white;
}
in my global.scss, but the icon persists in being grey. I have managed to make my toolbar title white.
This is my template:
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Title</ion-title>
</ion-toolbar>
I'd like to be able to simply define a global style to change the colour of all back buttons globally without having to add additional markup to every page with a back button.
Try it in the global.scss with important
ion-back-button{
--color: white !important;
}
Placing it within :root works as well per the docs:
https://ionicframework.com/docs/theming/css-variables#setting-values
:root {
ion-back-button {
--color: red;
}
}
Add the following styles in the global.scss
ion-icon.sc-ion-back-button-md , ion-icon.sc-ion-back-button-ios
{
color: #fff !important;
}
I had this problem just now, the --color variable just doesn't seem to work, however setting color instead with the !important flag did.
Here is what I did, note the focused and hover variables do seem to work if you need to change these.
ion-back-button {
color: #fff !important;
--color-focused: #fff;
--color-hover: #fff;
}
I had this same problem. No matter what I tried, I could not change the color of the ion-back-button from gray. So, I used the Chrome developer tools to inspect the element and learned that a theme for a third-party module that I had loaded was applying that gray color to all span tags. Fortunately, I no longer needed that module, so the answer for me was to simply remove the reference to the theme.
The module that was causing this problem was AWS Amplify.
I am posting this "answer" here to help you or anyone else take a "next step" in resolving this "maddening" problem: use Chrome developer tools to inspect the back button element in the DOM to identify the CSS rule that is being applied.
Check your variables.css file there is should be #media (prefers-color-scheme: dark) section that relates to dark theme colors. Also you need set color light to ion-back-button.
Does anyone know of a firebug like debug tool that will notify user of which #media tag they are currently viewing in?
It would clear up any confusion as to where user should be debugging in the code.
Using the latest Bootstrap (as of today).
Secondly this brings me to the main issue, when the screen size changes elements shift on the screen as expected, however 1 div shifts out in the wrong direction when the screen changes. Observing firebug, no html/css code changes.
So this must be JS? either way where to begin tracking the fault?
You could create a dummy element for each selector that you can then inspect using JavaScript and examine its value.
For example:
<div id="media-version"></div>
#media-version {
content:"Full Width";
display:none;
}
#media all and (max-width: 699px) and (min-width: 520px){
#media-version {
content:"520-699 width";
display:none;
}
}
alert($('#version').css('content'))
You'd have to change the content within each media query.
I am working on a fixed width legacy site and want to create a more optimal experience for tablet users by implementing a couple adaptive layouts. The first layout will be a 600px wide design and it will be displayed on devices with 600px - 768px screen widths. The second adaptive layout will be a 769px wide design and it will be displayed on devices with 769 - 1023 screen widths.
I want to know how I can use the viewport meta tag to make the designs scale up to fit into mobile browsers with widths larger than the original design.
For example, when the 600px design is viewed on a device with a 768px browser screen width, how can I make the smaller design take up the full width of the screen?
I have found a lot of information about adaptive layouts for websites with fluid grids, but nothing that specifically talks about the relationship between design width and viewport sizes for fixed width sites - at least not one that I can understand.
It is called responsive web development.
First step is to put below tag in your code inside head tag part.
For responsive design use media queries:
Now use the media queries, here is good example of media queries . Also learn how to use it.
Here is small snippet of code which will guide you how to use:-
<style>
.clear{ clear:both;}
/*this will work for desktop*/
#media only screen and (min-width: 801px){
#container {
position:relative;
width:80%;
margin: 0 auto;
}
/*this will work for tablet*/
#media only screen and (max-width: 800px) and (min-width: 521px)
{
#container {
position:relative;
width:80%;
margin: 0 auto;
}
/*this will work for mobile*/
#media only screen and (max-width: 520px) and (min-width: 320px)
{
#container {
position:relative;
width:80%;
margin: 0 auto;
}
</style>
Been tasked with the above title, found the logo, and how to create a custom html module. How should I proceed?
I cant edit the index of the site directly, unless theres a way to do it in joomla.
I'm not the most knowledgeable on front-end design standards, but I'd think some sort of CSS media query would do the trick.
Joomla 3 is based on Twitter Bootstrap. There are CSS helper classes such as ".hidden-phone" - try adding that to you module CSS (without the dot). If the template was developed by someone else, ask them to tell you what is the exact CSS class you should use.Check documentation
Not knowing which template you're using (some templates simply don't load bootstrap) but assuming you've bootstrap loaded, you need to edit the css file in your template directory - templates/your_template/css/your_css_templatename.css
Here, you should use the media queries and find the #media that you would like to change. Bellow the examples. Then, inside the one(s) that you may figure out will suit your needs, set the logo id selector and the attribute to display: none; (example below)
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) {
#your_logo {
display: none;
}
}
The options above will work even if bootstrap not loaded. If you have bootstrap loaded and you're able to set the class attribute in the logo, you can use the .hidden-phone utility class.
I'm quite new to CSS and web programming. What I'm trying to do is add a hovering effect for a button. I'm doing this by using 2 images.
There is a button called download and in hover code I add:
.button:hover{
background-image:url(images/button2.png);
}
The problem is the button takes time to load ie: on hover there is a delay to show the button. How can i solve this?
EDIT: I tried using preloading,but there is also a kind of delay
div#preloadedImages
{
width: 0px;
height: 0px;
background-image: url(images/button2.png);
}
You should use an image sprite to get rid of the delay. A sprite is one larger file that contains multiple images. Your button will have it's background set to sprite.png file. You can then change the background-position property to shift the positioning of your sprite.
On the other note - why do you use images for buttons? Most buttons can be done in pure CSS with some fallbacks for older browsers.
Create a single image out of the two images (which is called a sprite)
Here is a working example with an animation as well to show you how it works.
Click here >>> FIDDLE
Then set your background position to to show the normal state of the background image
.button {
width: 150px;
height: 50px;
background-image: url('image-sprite.jpg');
background-position: left top;
}
Then on your hover css, just move the background image to show the lower part of it
.button:hover {
background-position: left bottom;
}
Keep your current css and other stuff as they are and add an <img> component at anywhere of your page and make it hidden to load the image initially.
<img src="images/button2.png" style="display:none;"/>