I would like to use two types of sliders.
First one : a simple gallery slider when viewing a page on a mobile device.
And a second one : a more complex slider when viewing the page on a computer.
What's the best way of doing this ?
You can use Media Query for this, Create 2 sliders differently
<div id="ComplexSlider" style="display: none;">
// All your code
</div>
<div id="Mobilelider" style="display: none;">
// All your code
</div>
#media (max-width: 320px){
#ComplexSlider{
display: none;
}
#MobileSlider{
display: block;
}
}
#media (min-width: 321px){
#ComplexSlider{
display: block;
}
#MobileSlider{
display: none;
}
}
Look at the doc : http://getbootstrap.com/css/#responsive-utilities-classes
You just have to specify which device you want to make visible or not in the class attribute.
.hidden-xs won't print on extra small device
.hidden-sm won't print on small device
.hidden-md won't print on medium device
.hidden-lg won't print on large device
<div id="ComplexSlider" class="hidden-xs ">
...
</div>
<div id="Mobilelider" class="hidden-sm hidden-md hidden-lg">
...
</div>
Related
I am a beginner and learning from a tutorial using an API. I would like to change the layout of the design, and instead of having one column, I would like a three column layout. I don't know if I am using flexbox correctly.
I have tried using row and then having three columns, but somehow its not displaying correctly.I am also using bootstrap.
What you're looking for is CSS Grid, which lets you display elements in rows and columns.
Just change your flexbox to a grid with 3 equal columns:
/* display: flex; */
display: grid;
grid-template-columns: repeat(3, 1fr);
first of all, we need to clean up your HTML structure.
since in your javascript you are appending all of the cards in a class "images-container" we have to remove the duplicate divs.
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="images-container"></div>
</div>
<div class="col-md-4">
<div class="images-container"></div>
</div>
<div class="col-md-4">
<div class="images-container"></div>
</div>
</div>
</div>
and turned them into. so it will only appended into a single container and do our flex there.
<div class="container-fluid">
<div class="row">
<div class="images-container"></div>
</div>
</div>
The next one is CSS,
I added a "flex-wrap: wrap" on the "images-container" so that the cards will go into the next line whenever there is no space left.
/* Images Container */
.images-container {
width: 100%;
margin-top: 50px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
and since you are following bootstrap class names you have to add media queries on classnames with breakpoints so. it says the card will take 12 columns on xs "smallest screen" and 4 columns on medium screen.
.col-xs-12 {
width: 100%;
}
#media onyl screen and (min-width: 767px) {
.col-md-4 {
width: 33% !important;
}
}
now on javascript.
since we got our cards inside "images-container". then we need to add the classname "col-md-4" and "col-xs-12" on the card directly so it will have it's own width
// Card Container
const card = document.createElement("div");
card.classList.add("card");
card.classList.add("col-md-4");
card.classList.add("col-xs-12");
sorry for the long explanation I'm still improving my explanation skills hopefully it will help you out.
I'm currently on a MacBook with the display dimensions of 15.4-inch (2880 x 1800) here is a screenshot of how each section of my website looks for my homepage.
#app (section1)
#section2 (section2)
#section3 (section3)
----------
ISSUE ONE
How can I fix my h3 text to ensure it's responsive on a mobile device and it fits to be seen on a mobile device. Here is a screenshot below of how it looks as you can see it doesn't adjust and fit on the screen correctly. If you look at the JSFIDDLE link to my site at the bottom of the post you can see I have used <div class="col-lg-12"> to ensure it's responsive therefore, no idea why it's going this on mobile devices.
<h1 class="maintxt bounceInUp animated">Hi, welcome to my portfolio</h1>
<h2 class="maintxt bounceInUp animated">My name is Liam Docherty</h2>
<h3 class="cd-headline bounceInUp animated loading-bar">
<span>I'm a</span>
<span class="cd-words-wrapper">
<b class="is-visible">Front-End Web Developer</b>
<b>Graphic Designer</b>
</span>
</h3>
Here is a screenshot of a mobile device view of my website showing the issue.
JSFIDDLE
white-space: nowrap will prevent the text from wrapping on small screens. Remove that from .cd-words-wrapper b:
.cd-words-wrapper b {
display: inline-block;
position: absolute;
width: 100%;
text-align: center;
left: 0;
top: 0;
}
https://jsfiddle.net/wdafatrx/8/
You could also use vw and vmin units to keep them inside the screen.
.cd-words-wrapper b has white-space:nowrap set - this will cause all text inside it to stay on one line. Removing that is the fix to your responsiveness issue.
Use a media call in your css;
#media screen(max-width: 480px) {
<!--your div class name--> h3 : <!--new font size--> }
I have a partial view (handlebars html template) that has a piece for html for desktop and one piece of mobile. I just hide it accordingly using different css classes.
<div class='hideOnMobile showOnDesktop'>
<a name='manuals' href='#'>Manuals</a>
<!-- Extra html for Desktop presentations -->
</div>
<div class='hideOnDesktop showOnMobile'>
<a name='manuals' href='#'>Manuals</a>
<!-- Extra html for Mobile presentations -->
</div>
The important pieces of my css is basically hiding and showing the elements using media queries:
#media only screen and (min-width: 420px) {
.showOnMobile { display: block; }
.hideOnMobile { display: none; }
}
#media only screen and (min-width: 1050px) {
.showOnDesktop { display: block; }
.hideOnDesktop { display: none; }
}
CSS is attached for reference. The css is actually working as expected. The problem is the following:
When the browser receives the url for that specific page http://example.org/page.html#manuals, I would like the document to navigate directly to the first visible <a> element. No matter what, I cannot make the deep link to work with the first visible element. I've read that there is some kind of limitations, but I wanted to know if there is a work around, or if the only option that I have is to emulate the deep link using javascript (that I'm trying to avoid). Thanks a lot
Maybe the markup can be altered?
<a name='manuals' id="manuals" href='#manuals'>Manuals</a>
<div class='hideOnMobile showOnDesktop'>
<!-- Extra html for Desktop presentations -->
</div>
<div class='hideOnDesktop showOnMobile'>
<!-- Extra html for Mobile presentations -->
</div>
This way, the target of the hash (#manuals) is always visible regardless of the environment. This also makes it a bit more maintainable since you have less duplication.
My Question is How would I change the text of a HTML <p> tag when I am on a mobile device like android or iphone?
Here is my current code p tag:
<p>You are on a desktop good</p>
This is the <p> tag I want to appear on Desktop, Tablet and Laptop.
How can I make it so that it says the following on mobile device like android or iphone in Straight Up Javascript no bootstrap just JavaScript?
<p>Please Use a Desktop to view</p>
Please Help
Thank You For All answers
gives a id or specific class to your <p> tag and include the JS after the dom loaded
<p id="changeMe">Services</p>
<script>
if (navigator.userAgent.match(/Mobile/)) {
document.getElementById('changeMe').innerHTML = 'Services Are everywhere';
}
</script>
Or use css Media Queries to show and hide Paragraphs
<p class="desktop"> Services</p>
<p class="mobile"> Services Are everywhere </p>
CSS:
p.mobile { display: none }
#media (max-width: 640px) {
p.mobile { display: block }
p.desktop { display: none }
}
You can use CSS media queries, and use elements to show or hide the element based on the screen width.
For example:
p.mobile {
display: none;
}
p.desktop {
display: auto;
}
#media screen and (max-width: 480px) {
p.mobile {
display: auto;
}
p.desktop {
display: none;
}
}
Using a desktop and mobile class on everything that should be on desktop or mobile (exclusive) is important, so that this style will work on all of those elements that you want to change.
I have 2 divs side by side inside a main div. Lets say- left_div & right_div. When browser is in full screen mode- than left_div is 60% and right_div is 40% in width(as, main_div is 100% width).
Now if i restore the browser window and reduce its width- than the divs get underneath each other but still remains the same percentage as 60% & 40% of the screen.
What i want is that if the browser width gets underneath a certain amount than the divs will get underneath each other and also fillup the whole screen width-ie become full browser width.
How can i do it? Do i need to do it with JavaScript or jQuery?
HTML:
<div class="mainDiv">
<div class="left">
test
</div>
<div class="right">
test2
</div>
</div>
CSS:
div.main
{
width:100%;
}
div.left
{
width:60%;
background-color:red;
float:left;
height:100px;
}
div.right
{
width:40%;
background-color:blue;
float:left;
height:100px;
}
#media (max-width: 350px) {
div.left, div.right
{
float:none;
width:100%;
}
}
check this once may be help you here is demo
HTML
<div class="left-div">Left</div>
<div class="right-div">Right</div>
CSS
.left-div{width:60%;height:100px;float:left;background-color:#000;color:#fff}
.right-div{width:40%;height:100px;float:right;background-color:#333;color:#fff}
#media (max-width: 479px) {
.left-div, .right-div{float:none;width:100%;}
}
Your problem has been many people's problem. While you can write your own CSS, but you should consider screens with different DPIs and different devices and different browsers. But Bootstrap allows you to easily manage these situations.
http://getbootstrap.com/
once you include bootstrap in your page, you can have two DIVs like this
http://jsfiddle.net/Gt25L/119/
<div class="col-md-4"></div>
<div class="col-md-8"></div>
Also look at the tutorials, and they guide you through how to make responsive websites using bootstrap. you will not need any JavaScript. Bootstrap is based on CSS only.
This way you have less CSS to maintain and less chance of wrong behaviour in different browsers & devices over time.