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.
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'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;
}
}
İn a classic application When the end user enters the page, we try to give all the CSS belonging to the page. However, end user only interested in with visible part of the page. We load CSS components belongs to visible page size,but non-visible part as well.
How i can make it possible load CSS components when needed?
For example: When end user scrolls down,then load required CSS components.
Thanks.
You can do this by the #media query.
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
This way you can do this with all screen sizes
You can read more about this at:
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
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
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.