I have added a lightbox to a webpage, but the content does't show up in mobile view. I am a developer and new to designing, so please help me solve the issue
http://www.kahui.org/user/boardmember
Will be very thankful for any helpful suggestion
The problem is in the styles.css:2362
#media (max-width: 768px) {
...
.about-left p:nth-child(3) {
display: none;
}
...
}
It says browser to hide <p> if it's the third child.
Related
I have a div with some text in it and a link around it.
<a href="mypage.html">
<div>
Text goes here ...
</div>
</a>
However, I only want the link to work at a certain page width, namely less than or equal to 625px. I know that the code below is nonsense, but it illustrates the sort of thing I am looking for:
a {
follow-link: no;
}
#media (max-width: 625px){
a {
follow-link: yes;
}
}
A solution with javascript would also be fine for me.
Thanks for your help!
You could use property called pointer-events
a {
pointer-events: none;
}
#media (max-width: 625px){
a {
pointer-events: all;
}
}
I'm fairly new to this.
On my website, I have been trying to fix the mobile version of it.
https://glacieradventure.is/tour/vatnajokull-glacier-walk/
If you look at this page on PC you will see the booking widget on the right side but when you switch it to mobile device view the booking widget goes to the bottom.
I want the booking widget under <h2>.
I did this by moving the html code, but it does not work with the css, and when I switch back to PC view it looks wrong.
Please help a girl out!
After h2 tag, create a div element
ie,
<div class="responsive-only">{Copy and past the booking widget code here}</div>
// Note: So the booking widget code present in both places.
<style>
.responsive-only {display: none;}
#media (max-width: 991px) {
.responsive-only {display: block;}
// Note: Then hide the another one widget (which appears in the bottom)
}
</style>
Hope it will helpful.
You need to add styles display:flex and flex-direction: column-reverse to your element with the class .twocolumns at your mobile version. It should help you.
#media screen and (max-width: 991px) {
.twocolumns {
padding-right: 0;
display: flex;
flex-direction: column-reverse;
}
}
I have a website that my client needs to set the cart menu item visible beside the menu button when is on mobile device but I don't know what is the better way to do this. Does anyone of you have any tips ? I appreciate in advance. Bellow is an image of the item highlighted in yellow that I want to set visible :
Have a closer look at Bootstrap's Responsive Utilities documentation. You can use the hidden- or visible- classes.
To hide on desktops add the following classes to your element:
hidden-md hidden-lg
To hide on mobile use:
hidden-xs hidden-sm
Here's a jsFiddle demo.
By adding following class you can hide it in big screen and show in mobile.
col-visible-xs col-visible-sm col-hidden-md col-hidden-lg
For hidding in big screen use following class
col-hidden-md col-hidden-lg
Showing in small screen use following class
col-visible-xs col-visible-sm
You could search something for this in jquery and showing and hiding blocks. a very simple way would be to use media queries in CSS. It isn't the best solution but it is the easiest one.
#media screen and (min-width: 768px) {
.shopping-cart {
display: none;
}
}
#media screen and (max-width: 768px) {
.shopping-cart {
display: block
}
}
Is there a way in AngularJS to show / hide a div depending on the browser with?
Here is some pseudo-code:
if (width < 750px)
ng-hide
I hope you got my intention. :-)
Due to accessibility issues, I don't wan't to use this jquery code:
#media (min-width: 500px) and (max-width: 600px) {
myelement {
display: none;
}
}
This does just hide the html-element, I wan't to remove it from the DOM.
I am thankful for any help I can get on this issue.
I'm working on a HTML site and adding a mobile menu. I was able to add the menu but having trouble with the button that opens that menu. This is what I have.
<a id="simple-menu" href="#sidr">
<img class="hidedesktop" src="img/menu-icon.png" alt="Menu">
</a>
And when I press the image it opens the menu. I need it to remove this from the page on desktop and show on mobile. I've been doing some research and found that
display:none;
should work in the #media but I tried and wasn't able to set this up correctly. Can anyone tell me what I'm doing wrong? Below is my CSS for hide desktop.
.hidedesktop{
display:block;
}
and CSS for #media remove on desktop
/*#media only screen and (max-width: 768px) {
.hidedesktop{
display:block;
}
}
#media only screen and (min-width: 768px) {
.hidedesktop{
display:none;
}
}
}
*/
I would like to also hide the main menu on the mobile version but if I get help with this I think I'll figure that out.
You only need min-width for it.
#media only screen and (min-width: 768px) {
.hidedesktop {
display:none;
}
}
Or to use min-device-width if you want (unlikely), make sure to check out the link below if you're not sure about it.
#media only screen and (min-devide-width: 768px) {
.hidedesktop {
display:none;
}
}
Read here to learn the differences