I'm trying to use OceanWp theme.
And I have imported demo data "Lawyer". And modified it for myself.
This is a demo: https://lawyer.oceanwp.org/
The section "Why Choose Our Firm" does not apper on mobile phones.
Both in the demo, and in my case.
It has switched somewhere. I have also checked if a class is added manually. It seems that no class is added. But in fact elementor-hidden-phone is still present. Could you tell me what to look at to solve the problem?
There's a bug in Elementor: check "Hide On Mobile" and just uncheck it - class will disapper
Please use this CSS in the custom CSS plugin (https://wordpress.org/plugins/custom-css-js/)
#media (max-width: 1024px){
section.lawyer-firmvisible-section {
display: block !important;
}
}
To fix this via CSS, simply follow the below steps.
Once logged in, edit the "Why Choose Our Firm" section in the elementor.
Add a class, for example - "lawyer-firmvisible-section".
Put the CSS
#media (max-width: 1024px){
section.lawyer-firmvisible-section {
display: block!important;
}
}
Related
This is a full-screen view of the amazon website
This is responsive view
I want to do like this how can I do that using CSS
I would suggest you to read this post
https://stackoverflow.com/help/how-to-ask
Specifically we could get more information about what you have already tried doing.
You can use css media queries to manipulate the layout of the website.
reference link
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
I suggest u for using bootstrap. It's easier way to learn responsive website
https://getbootstrap.com/docs/4.0/getting-started/introduction/
After that, u can build miniproject to learn it.
I need to change the grid size of a wordpress widget. It currently has a grid size of medium-8 and would like to change medium-6. Its on the home page of the site and has a class of home-middle-left. I'll attach a picture of the markup from the chrome console. If you need any other details, let me know. I can't think of anything else to add. Thanks ahead of time for any help.
Html Markup of widget
Can you access the HTML?
If you changed it to medium-6, the row won't span full width because the right column is still medium-4.
You could use CSS.
.home-middle-left {
#media (min-width: 600px) and (max-width: 1024px) {
width: 50% !important;
}
}
You will need to wrap that in a medium query though, but this depends on your website settings so I cannot add this. But it will be something like the above.
I use WP 4.9.2 and Leto theme from aThemes. The site that I built on it looks great on bigger screens, but is really screwed up in mobile. I checked the stylesheet - the problem is related to the #media queries. I just don't seem to be setting in the right way ( the css). So, I need to know how to style or what css to use to set the thing up. The theme I use is Leto, and I use WooCommerce plugin. So the responsiveness of the site is perfect on all pages but this one, which in my opinion, utilizes WooCommerce. Anyone anywhere any help is welcome.
Here is the you can look up the whole stylesheet -->stylesheet. You can download the theme in the first link, which was to Leto.
You can use media query:
#media only screen and (min-width:280px) and (max-width:480px){}
#media only screen and (min-width:481px) and (max-width:619px){}
#media only screen and (min-width:620px) and (max-width:767px){}
like :
#media only screen and (min-width:280px) and (max-width:480px){
body{
do_stuff_here
}
.wrapper{
do_stuff_here...
}
}
OR Please read :
https://codex.wordpress.org/Styling_for_Mobile
My site is the following:
http://www.evarancho.com/
The problem is that the email on the header is hiding when you make the screen smaller. I don´t know how because it was not happen before and it just started out of nowhere.
I have tried this css line but it is not working.
.w-text-h{display:show !important;}
I don´t know what to do. Any help is appreciated.
Thank you!
I see it on the screen in mobile.
Anyways, display: show is not right.
Try display: block !important
It is difficult to narrow down.
I suspect this is the issue:
#media (max-width:600px) {
.header_hor .l-subheader.at_top {line-height:36px;height:36px;}
**.header_hor .l-header.*sticky* .l-subheader.at_top {*line-height:0px;height:0px;overflow:hidden;*}**
.header_hor .l-subheader.at_middle {line-height:50px;height:50px;}
.header_hor .l-header.sticky .l-subheader.at_middle {line-height:50px;height:50px;}
.l-subheader.at_bottom { display:none; }
.header_hor .l-subheader.at_bottom {line-height:50px;height:50px;}
.header_hor .l-header.sticky .l-subheader.at_bottom {line-height:50px;height:50px;}
The line height 0 and all all that would definitely be a problem and I believe it is set to sticky (in the us.headerSettings javascript source on the page, the header is set to sticky). A possible quick fix, rather than editing the CSS (suggested process mentioned below), might be to make the header not sticky in the settings. Though I'm not familiar with this theme, so I can't be sure that that will fix it, but it's a good bet.
If not the above, this might be the next place to look:
#media (max-width:600px) {
.ush_text_3 { font-size:13px; }
}
.ush_text_3 { white-space:nowrap; }
Perhaps the nowrap is causing an issue? I'd see what happens if it's removed.
These changes can be made in the css style file directly with to issues: 1. if you break it it's not easily recovered and 2. you'll lose changes with theme update.
Usually, making a child theme and adding the custom changes in the child themes style is recommended.
This can be done with one of many wordpress child theme plugins. I recommend Child Theme Configurator
There's also an error with the color in the css file, but it isn't the issue as it's just ignored:
.ush_text_3 .w-text-value { color:; }
(see errors here.)
I've been given the task of customising certain elements of a site which is using Twitter Bootstrap 3.0.2.
The site will be using default Bootstrap styles and responsive layouts except for a particular custom CSS theme file whose modified styles will only be applied when certain users access the site via certain means.
In any event, I need to disable just the .xs responsive layout and nothing else. This means that the screen must retain a small screen layout on resolutions below 767px.
I've looked at many answers on this site and the closest one is this one that describes editing the existing bootstrap.css file.
I don't want to edit the core bootstrap files but simply want to override the .xs layout in a custom CSS file that is called after the bootstrap file.
I'm not sure how or what I should be editing as the media queries look like the following and it's a bit confusing to me.
#media (max-width: 767px) {
.hidden-xs,
tr.hidden-xs,
th.hidden-xs,
td.hidden-xs {
display: none !important;
}
}
#media (max-width: 767px) {
.hidden-sm.hidden-xs,
tr.hidden-sm.hidden-xs,
th.hidden-sm.hidden-xs,
td.hidden-sm.hidden-xs {
display: none !important;
}
}
Any and all answers are greatly appreciated.
Thanks in advance.