hey i want to know is how do you move a br element in a paragraph when it is on a different screen size. I know that sounds like a confusing/tricky question but let me explain:
This br element in the p tag right here. Say where the br element is now it is diplaying that when this site is view on a desktop. But i want to the view the break line (the br element) placed right before the word "break" when i view it on an smaller device such as a tablet or a phone or something.
<p>I am a <br/> Paragraph with a break line in it.</p>
Is it possible? If it is, is there a way to do it with javascript or css without actually changing the html code it self?
You can do it this way.
<p>I am a <br class="sm-hide lg-show"/> Paragraph with a <br class="sm-show lg-hide"/>break line in it.</p>
.sm-hide {
display: none;
}
.sm-show {
display: block;
}
#media screen and (min-width: 961px) {
.lg-hide {
display: none;
}
.lg-show {
display: block;
}
}
<br/> tag is forcing HTML to have a line break, regardless of you browser or device. Here <br/> is not the proper way. If you really want, say, have a line break at different places according to your device (screen size), you could use CSS #media rules, such as
#media screen and (max-width: 480px) { /* your css code */ }
So that the above css rule only applies to screen whose width is smaller than 480px.
On the other hand, there are some very popular library/framework for you to design web both for desktop and/or mobile, such as Bootstrap.
Related
I am working on a fiddle which is working perfectly fine in a desktop view.
The desktop view works in a way that on click of any 2 product items (By default, one remain selected) , the description box gets displayed at the bottom giving detailed explanation of those product items.
The snippets of CSS codes which I have used for the mobile view:
#media only screen and (max-width: 767px)
{
.product-all-contents
{
overflow-x: auto;
}
.product-contents .product{
min-width: 50.795%;
margin: 0 2%;
padding-top: 3.91%;
padding-left: 3.91%; padding-right: 3.91%;
}
}
Problem Statement:
In the mobile view, there is one small issue. The issue is that, I am seeing the explanation of both product items whereas only one should be displayed without changing the look of it i.e. items should remain piled up.
I want the mobile view to work exactly in a way as in the desktop view i.e. when we click one product item, the description box should display at the bottom and when we click another product item another description box should display at the bottom.
The reason why I have used display:inline-block !important because I want the items to pile up vertically in mobile view in html/css. Removing that will make the images and text squished.
This happens because of you have set display: inline-block !important; for div.franchisehubtv and div.cloudbasedtextipad in #media only screen and (max-width: 767px) which override your display: none; css.
Solution No: 1
You can remove those classes from the media query, so your #media will be like this
#media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: inline-block !important;
}
.cloudbasedtextipad, .franchisehubtv {
flex-direction: column;
}
.tv img {
max-width: 100%;
height: auto;
}
}
Solution No: 2
You need to override those css by adding these lines
div.franchisehubtv[style="display: none;"] {
display: none !important;
}
div.cloudbasedtextipad[style="display: none;"] {
display: none !important;
}
Updated fiddle here
Update: You can set your layout using flex for small devices
Didn't get you clearly, can you please specify is this mobile view the one you want to be the same display in desktop? if so then i recommend you to check how to use bootstrap grid system and you can use their CSS as a benchmark.
Looking at your current solution, the second div has a style rule that is invoked below 767px, which forces it to display as an inline-block. By adding the !important declaration, this then overrides any other property declaration.
If you remove this rule, you'll get a broken layout, but the div is hidden as required.
As to the layout, the content within each div will need some refined flexbox rules, which can use the same breakpoint to switch between column or row direction:
flex-direction: column (for mobile)
flex-direction: row (for non-mobile)
One problem you have is because you set the display property as inline style in the HTML, so you have to use important to overwrite.
The second problem is that you are not having in count the display: inline-block on your jQuery.
You are going to have to change several things, I've changed the fiddle to account for these things, only works if you click in the buttons, on load you see both items, there are several ways you can do these things, I only want to make the minimal changes to show the result.
https://jsfiddle.net/zaefnson/2/
And on desktop probably doesn't work either, just like I said, there are several things you are going to have to change.
I have a web page and that page can be viewed both on mobile and desktop. However i have two different css classes like below:
<div class=phone-visible>
<h1> .....</h1>
</div>
and
<div class=phone-hidden>
<h1> .....</h1>
</div>
so basically when i open the page on mobile see some content/styles which i write specifically for mobile.
But for SEO purpose, when the page loads i dont want to see the duplicate header tags when i open on a specific device, like i dont want to see the mobile tag when i open my page on desktop.( basically in view source i dont want this to be displayed) I tried doing in CSS( referring to solution in other posts) but that didnt resolve my issue as those still show up on source.
Any particular approach?
You only need one instance of the H1 tag.
<div class="myclass">
<h1> .....</h1>
</div>
Then use your responsive CSS to style according to the viewport size. That's what responsive is all about! All you would need is to edit the smaller view port size.
So, improving on Yubraj's answer, leave your largest screen size CSS in the main section of your CSS and then add your mobile css here:
#media (min-width:750px) {
.myclass h1 {
font-size: 18px;
font-color: #000000;
}
}
Use CSS Media queries to control the UI in different Screen size
below example might help you.
#media (min-width:750px) {
.bigScreen {
display:block !important;
}
}
//tabs and bigger screen
#media (max-width: 600px) {
.smallScreen {
display:block !important;
}
.bigScreen {
display:none !important;
}
}
So my graphic artist came up with a layout that I am having trouble coming up with a clean solution to. Basically they want a full-width responsive image, with text over it. But the text has to be left-aligned and fit within a container div, instead of being full width too. I also need to take care of mobile/tablets/etc. so I have to make sure the font size works on all devices too (hence the font resizing in the JQuery/JS).
So I was just wondering if I am doing this the most efficient way possible. I feel like bootstrap should have something to fix this issue and that I just missed it, but this is the best solution I could come up with (WARNING: code is still a work in progress, don't hate me for poor JS/JQuery =D)
So here is my BootPly with the solution I came up with:
http://www.bootply.com/bdS9H3otpi
I am hoping someone will be like, oh boy that was overkill just do X, but for the life of me I cannot think of what X will be.
P.S. My question was basically answered by myself, I am just hoping there is a cleaner solution. If no one can come up with one I will just clean up the JQuery/Javascript code and use it as is
first of all no need for JS .
1- main part put the image as back ground and the text as title ( h1 )
2- for responsive use only CSS
for example
#newsHeaderTitle{
color:white;
height:100%;
margin:0;
font-size:350%;
line-height:350%;
}
/* image BG image */
#media only screen and (max-width : 1200px) {
#newsHeaderTitle{font-size:350%;line-height:300%;}
}
#media only screen and (max-width : 992px) {
#newsHeaderTitle{font-size:300%;line-height:350%;}
}
#media only screen and (max-width : 768px) {
#newsHeaderTitle{font-size:200%;line-height:350%;}
/* image BG tablet image */
}
#media only screen and (max-width : 480px) {
#newsHeaderTitle{font-size:100%;line-height:100%;}
/* image BG mobile image */
}
try to use all height and sizes in EM its better than %
dont add your CSS in html .
For my first responsive design I use css #media with display: none; or display:table-cell to show or hide sidebars. This works fine, I need the display:table-cell for a three divs layout.
CSS example:
#div_right { display: table-cell; }
#media screen and (max-width: 700px) { #div_right {display: none; } }
JS is standard ToogleDisplay function (with e.style.display = "table-cell"; in place of e.style.display = "block"; )
On small windows/screen the sidebars are hidden, but a new div with 2 options to display these 2 same navigation sidebars appears: clicking on a link with embedded javascript, allows to toogle display of a sidebar div. It also works fine.
The problem comes when I show then hide the sidebars by clicking on the JS links (on small windows), and then resize the window to a larger width: the sidebars are not displayed this time!
Is there a #media condition to specify "on larger width than xxx" do force display:table-cell; ?
I don't want to use jQuery, and a solution with CSS would be nice.
Just use min-width instead of max-width:
#div_right { display: table-cell; }
#media screen and (min-width: xxx) { #div_right {display: none; } }
Very simple, tells the browser that these rules are to be used if the browser is larger then xxx.
If you want to know everything about #media queries, check out the Mozilla Docs On It.
Could be very helpful to you.
To see it in action, see this JSFiddle
[EDIT]
As noted in the other answer, if you are using jquery, it will override the #media rule.
The correct way to do this, not using !important is to use jquery:
In your js:
$(".menu").show().css("display","block");
This JS shows it as display:block;
Are you using jquery to $.('el').css("display","none") or .hide() the elements? If so jquery will add the style as an inline-style - hence overwriting your media query.
You can try to add !important to your CSS code (the media query) and it might work.
See: http://www.iandevlin.com/blog/2013/05/css/using-important-in-your-media-queries
Also please note the follow rule of thumb:
CSS style is applied in the following hierachy/priority:
!important is always highest priority
The closer styles to your elements will override styles defined before:
inline styles are higher priority
CSS styles are lowest priority
Please check: developer.tizen.org/dev-guide/2.2.1/org.tizen.web.appprogramming/html/guide/w3c_guide/dom_guide/html_priorities_css.htm
Also you might want to use not only min-width, but rather a range like:
#media screen (min-width: xxx) and (max-width: yyy){ }
Check out some standard templates from: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
How do you make a div disappear when reducing window width, leaving it's complete space available to other elements? I do not mean hiding piece by piece on overflow, but the whole element.
I came across this brilliant feature on the following URL:
http://flexslider.woothemes.com
Is javascript required or can it be done with CSS? I noticed the page is pretty much HTML5.
You can do this with just CSS:
#media all and (max-width: 480px) {
.mydiv { display: none; }
}