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.
Related
I'm trying to get my app to look and behave similar to the Angular Material website: https://material.angular.io/components/categories
I've cloned https://github.com/angular/material.angular.io and run it locally, but I'm struggling with finding out the correct styles I need to apply to which elements (and I don't want to just copy everything from that project, I'd rather learn how to achieve what I want so I can apply it then to some other projects as well). I've inspected the elements and styles using the Chrome dev tools, but I was unable to reproduce it all in my Stackblitz example below:
I've started a project on Stackblitz by simply cloning the Sidenav example and adding my own primary toolbar:
https://stackblitz.com/edit/material-angular-io-behavior?file=app%2Fsidenav-overview-example.html
My main goals:
Contents scrollbar should not cover primary toolbar on wide screens, but is allowed to do so on smaller screens
Keep primary and secondary toolbars "connected" when resizing (width smaller than 600px)
For wide screens:
Fixed Sidenav (in a box)
Narrow scrollbar for sidenav contents
Is it recommended to use flexbox to layout the whole app? And is it possible to place the scrollbars as intended using flexbox?
UPDATE:
final version:
https://stackblitz.com/edit/material-angular-io-behavior-with-bootstrap
Resources that helped me getting there:
Introduction to CSS
Learn CSS Variables for free
Learn Flexbox for free
Learn CSS Grid for free
angular/flex-layout
Okay, I tried to reproduce the navbar similar to the website of Angular Material, StackBlitz HERE.
The contents of the page are separated from the primary toolbar and the sidenav.
The vertical scroll of the page is different from the side menu and does not impact the primary toolbar.
The content of the page is done through the .
And all that was done with Flex-Layout.
I hope this will help you.
DEMO:
With relation to your code on stackblitz, you can add below code in your current CSS :
#media (max-width: 600px) {
.main-mat-toolbar {
position: static !important;
}
.example-container {
position: static !important;
}
}
You can read more about #media queris in CSS at Using media queries
We have been using empty anchor tags with css for years to allow hover states with no issues. Here is a sample of the css and html.
a#phone:link, a#phone:visited { width:34px; height:34px; display:inline-block; background:url(phone.png) center top no-repeat; }
a#phone:active, a#phone:hover { background:url(phone-hover.png) center top no-repeat; }
After a lot of digging I finally got cke to stop deleting my empty anchor tags, here is what I did if interested or helpful. I tried to set the removeEmpty but that didn't work until I added protectedSource:
config.contentsCss = '/css/editor.css';
config.protectedSource.push(/<a[^>]*><\/a>/g);
enterCKEDITOR.dtd.$removeEmpty.a = 0; code here
That finally prevented cke from deleting the tag, however the icons still does not appear in the wysiwyg editor. Its all there in code view...
I have stylesheetparser installed and the other styles in the linked css file are displaying correctly, including floating divs that have a width/max-width defined.
When I view the web page in Dreamweaver or a web browser, all the icons are there and working great, but the links/icons don't appear in cke. I can/have added a no-break space, but that adds margin/line-height, and just messes up the alignment design and layout.
What am I missing? Is this expected behavior? I don't think it should be. Is this a bug?
Any thoughts/ideas/help? Thanks!
I am creating a website which has the following code in it.
<style>
.browser_logo{
width:100%;
}
</style>
<img class="ie_logo browser_logo" src="images/clientimages/logo/logo.gif">
The image is about 1000px width which is extreme but it needs to be. The problem is that it is only 52px width in Safari. It is correctly displaying in Chrome, Firefox, Opera and even in IE. I have been looking the entire evening for Safari hacks but everything I find also changes the output in the Chrome browser. When I remove the width 100% or basically the style part then it shows the entire image as it should in safari. But then it will no longer be responsive. Any help would be greatly appreciated.
I have added the following to the style part above. Which makes it work but it is an ugly hack so I still would like to know how to do it properly.
This is the new code. I have used the screensizes from http://www.websitedimensions.com/
<style>
#media screen and (min-width:310px) {.browser_logo{min-width:310px;}}
#media screen and (min-width:468px) {.browser_logo{min-width:468px;}}
#media screen and (min-width:750px) {.browser_logo{min-width:750px;}}
#media screen and (min-width:989px) {.browser_logo{min-width:989px;}}
#media screen and (min-width:1010px) {.browser_logo{min-width:1010px;}}
#media screen and (min-width:1117px) {.browser_logo{min-width:1117px;}}
#media screen and (min-width:1245px) {.browser_logo{min-width:1245px;}}
#media screen and (min-width:1405px) {.browser_logo{min-width:1405px;}}
#media screen and (min-width:1645px) {.browser_logo{min-width:1645px;}}
#media screen and (min-width:1885px) {.browser_logo{min-width:1885px;}}
}
</style>
<img class="ie_logo browser_logo" src="images/clientimages/logo/logo.gif">
Why not just set .browser_logo { width:100%; } instead of using all of those media queries?
Perhaps it would be easier to understand what you were trying to do if you put it in a jsfiddle, or showed us the live link?
Code:
#media screen and (min-width: 371px) {
.img_displayer {
display:none;
}
}
If i am not wrong, the above code says that if the min-width of the browser becomes 371px the .img_displayer element shouldn't be displayed. But right now when my site is open in full page, the image is not displayed. What am i doing wrong?
What your media query is saying is "if the media is a screen and is at least 371px wide, then hide the image".
I think you might have intended to use max-width:370px
Kolink explained it extremely well. Your image is displayed until the screen is 371px in width and then the display:none kicks in to hide the image. Here's a quick JSFiddle to demonstrate. If you resize the window so the Result window is less than 371 pixels your image will appear.
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.