I have link that should link to phone number in mobile size like this tel:+989203022438 but in desktop link to my contact page. Is that possible?
Sure, what you need to do is have two elements.
First element (for mobile) and have the text inside of it the telephone number.
Second element (for desktop) with the link to your contact page.
Next, you'll use CSS media queries to set which you should show, something like this:
#phoneContact {
display: none;
}
#media only screen and (max-width: 500px) {
#phoneContact {
display: block;
}
#desktopContact {
display: none;
}
}
Related
my website's main menu responsive breakpoint is at the 850px for mobile menu. Though I want to change it to a mobile menu from 1369px, as the desktop main menu after 1369px overflow the site content. I have tried CSS such as:
#media only screen and (max-width: 1369px) {
.header-nav.header-nav-main.nav.nav-left.nav-line-grow.nav-size-small.nav-spacing-medium.nav-uppercase {
display: none;
}
.mobile-nav.nav.nav-left {
display: block; !important:
}
}
Thus it only hides desktop menu but no hamburger menu appears...
Could somebody advise me how to change this breakpoint correctly? p.s. I am an amateur beginner in web development.
Thank you in advance.
you may add another breakpoint to your css file easily by adding #media :
#media only screen and (max-width: 1369px) {
.header-nav, .header-nav-main, .nav, .nav-left, .nav-line-grow, .nav-size-small, .nav-spacing-medium, .nav-uppercase {
display: none;
}
.mobile-nav, .nav.nav-left {
display: block; !important:
}
}
I'm pretty new to advanced CSS. I have a custom heading section which i want to make centered on mobile only. I have added a class name and the following code but nothings happened.
.mobile-text {
text-align: right;
}
#media (max-device-width: 600px) {
.mobile-text {
text-align: center;
}
}
This is the homepage of this site and the paragraph is the following:
REAL ESTATE THAT CHALLENGES NORMS & ELEVATES EXPECTATIONS. THIS IS COLOURFUL THINKING IN A BLACK AND WHITE WORLD.
Your class on the website is .mobile-text, and it should be mobile-text - The . is only used in selectors to say that the following text is a class name
Also, your inline styles on the element ( style=font-size: 35px... etc ) is overwriting your changes - you can use !important to handle this lazily
.mobile-text {
text-align: right !important;
}
#media (max-device-width: 600px) {
.mobile-text {
text-align: center !important;
}
}
max-device-width will target the width of the entire device area (i.e the device screen). Instead use max-width, which will target the width of the entire browser area.
#media (max-width: 600px) {
.mobile-text {
text-align: center;
}
}
Note: device-width queries are deprecated.
When I check the html of your page I can see the class="" of this <h4>:
class="vc_custom_heading .mobile-text wpb_animate_when_almost_visible wpb_right-to-left right-to-left vc_custom_1580217248411 wpb_start_animation animated"
In your css you want to manipulate it using the .mobile-text class. Problem here is that you define this class in your html using .mobile-text. That's actually wrong, you need to define it with only mobile-text like this:
class="vc_custom_heading mobile-text wpb_animate_when_almost_visible wpb_right-to-left right-to-left vc_custom_1580217248411 wpb_start_animation animated"
The . is actually a css selector for a class like # is a selector for an id.
Your media query is not working on desktop if you are check in desktop view.
And also your class declaration is wrong please remove . from mobile-text. :)
max-width is the width of the target display area, e.g. the browser
max-device-width is the width of the device's entire rendering area, i.e. the actual device screen
Please use #media all and (max-width: 600px){}
For more details please visit here
Hope it will help you. :)
I am using Node child theme for my site. The header and menu works fine in the desktop mode but when it is shrinked to responsive mood the heading with menu disappeares. I have tried allmost all the options but none is working. I couldn't find any documentation of the theme and any specific solution on the net. My site url is-
http://onlineinternetquest.com/
Add This code in your mobile media query
header.edgtf-mobile-header {
display: block !important;
}
header.edgtf-mobile-header .edgtf-mobile-header-inner {
height: auto;
}
You have media-query in your css that says under 1024px display: none; to head.
See screen shot from F12:
So remove this media-query:
media only screen and (max-width: 1024px)
.edgtf-page-header, .edgtf-top-bar {
display: none;
}
I installed a plug-in called Display-listings-shortcode, and added the columns-extension to allow for columns the blogs halfway down the homepage at RitaNaomi.com will be horizontally displayed on a web browser. It looked whacky at first with titles being scrunched beside and underneath the image, but eventually i figured out how to edit the .display-posts-listing class to change the display
.display-posts-listing .listing-item {padding-bottom:30;}
.listing-item
{
float:left;
width:22%;
margin: 40px
}
But when I look at it on a mobile device, they're all scrunched together as if it was still being displayed on a laptop. I want to have it listed vertically and not horizontally, because thats the way it would fit best.
I tried (and it didn't work) to use #media to change it through the css, but it didn't work.
#media handheld {
.display-posts-listing .listing-item {
clear: both;
display: block;
}
.display-posts-listing img {
float: left;
margin: 0 10px 10px 0;
}
}
You shouldn't be using #media handheld {} since it's been deprecated according to MDN.
You're better off targeting pixel-width values. You may need a couple queries, and some of the oldschool standards were 1023px, 767px. Feel free to replace the 900px below with whatever works for you.
#media only screen and ( max-width: 900px ){
.display-posts-listing .listing-item {
/* CSS Here */
}
}
Removed the custom CSS that was already added from the original theme. It was interfering with the Columns display.
Not using #media handheld {} because it was deprecated (thanks to xhynk for the response), and instead used the command (max-width: 768) , the point at which the title and image css look funky.
To make the title display on its own line on a bigger screen, i added this to my CSS:
.display-posts-listing .listing-item .title { display: block; }
And now i'm using the above media query to figure out how to style it on smaller devices.
Complete CSS: https://gist.github.com/billerickson/17149d6e77b139c868640a0ed3c73b3a
I have <div class="rightside"> on every page of my site. It positions a contact form on every page, then at 850 pixels wide screen (for responsive) it hides the contact form with display: none;
#media only screen and (max-width : 850px) {
.rightside {
display: none;
}
}
On the contact us page, I would like to make the contact form still available for this page only. How can I change on the contact us page, so the contact form is still available for devices below 850 on contact us but display: none; on every other page ?
UPDATE:
I wish to use the attributes from .rightside in my css. I have tried:
<div class="rightside" id="contactpage"> in contact page
in the media query for 850
.rightside #contactpage {
float: left;
}
try adding another css style to your code just after the existing one, like this:
<div class="rightside contact"></div>
#media only screen and (max-width : 850px) {
.rightside {
display: none;
}
.rightside.contact {
display: block;
float:right;
}
}
On your HTML, you can add an additional class to all the rightside divs that you want to disappear after a certain point, and then just use CSS selectors to remove these divs only. Change your HTML markup on all the responsive divs, so that instead of <div class = "rightside>, you have <div class = "rightside responsive">. This adds an extra class to the div that is called responsive, and from here you can just select the divs that have this class using .rightside.responsive instead of just .rightside on your media query.
UPDATE
The reason that the code that you recently updated does not work, is because you have a space between the #contactpage and .rightside. By having no space between the two selectors, you are selecting elements that are on the same level, and your code should work.