I'm using wpbakery wordpress plugin. I added in design options padding and generated css code looks like:
.vc_custom_1541499756394 {
padding-top: 30px !important;
padding-right: 250px !important;
padding-left: 250px !important;
}
I need to remove padding on smaller screen sizes.
My question is, what is best practice to do that?
Simple media query like this or there is better way?
#media only screen and (max-width: 720px) {
.vc_custom_1541499756394 {
padding-top: 0px !important;
padding-right: 0px !important;
padding-left: 0px !important;
}
}
A more flexible approach would be to remove all of the styles you've added to the VC meta box and assign a class to it, pushing the required styles that way. Doing so will enable you to be specific for viewports and enable you to reuse the style across your site.
Set your Design Options like this:
And assign a style here:
Then add the required styles to the class.
Hope that helps :)
Related
So having a really weird issue here, only in Safari 13.0.5, tested on multiple machines and get the same error.
The project itself is a networking app built with Laravel, using Laravel Mix to compile assets.
I have a form with an ID of profileForm:
<form id="profileForm">
... inputs
</form>
This form uses the default form styling I've created for this project - which is working fine.
However the weird thing is, some styles from inside a media query from a completely separate element are being applied here?
.profile-modal {
.. other styles
#media screen and (min-width: 768px) {
padding-left: 70px !important;
padding-right: 70px !important;
}
}
This form does not have the .profile-modal class, yet Safari is applying the above styling to it which is for a completely separate part of the website.
If I rename the class in the sass to something completely random, i.e:
.asdfghjkl {
.. other styles
#media screen and (min-width: 768px) {
padding-left: 70px !important;
padding-right: 70px !important;
}
}
It still applies those styles to this element as seen here
To combat this, I thought as a temporary measure I could add the following to my blade template to remove the padding:
<style>
.profile-modal{
padding-left: initial !important;
padding-right: initial !important;
}
</style>
However that didn't apply to the broken element, to get it to work I have to use the correct ID #profileForm.
Has anyone else had this issue on the latest version of Safari?
I am using essential grid to show 4 panels on my homepage. the panels work fine on desktop however on mobile there is extra margin at the top. I have applied following CSS;
.l-section{ margin-top: 0 !Important;
min-height: 0 !Important;
}
But nothing seem to work. The website is tyloz.com, any help is appreciated.
For your homepage, you'll wanna add this media-query.
#media (max-width:767px){
.l-subsection-h {
margin-top: 0!important;
}
}
I've tried many ways to add padding to my sidebar widgets without success when I make the changes via Developer Tools it works, but I get stuck when I try to find the right tag to call, since I'm using a theme that might have different tag names¿? (I'm sorry if this sounds dumb but I'm kinda new to this, my site is http://thenoirportrait.com, as you can see for example the Social Media blocks are stick to the sidebar divider. These are two of the many codes I've tried to use in my child theme:
.sidebar.widget-area.position-right {
padding-left: 40px!important;
padding-right: 40px!important;
}
.xt-widget-content {
padding-left: 40px!important;
padding-right: 40px!important;
}
Thank you so much for your help :)
Leave a space between the "px" and "!important":
.sidebar.widget-area.position-right {
padding-left: 40px !important;
padding-right: 40px !important;
}
Apart from that, this selector should work
A website of a friend that was designed on Squarespace is located at www.diamondathome.com.
The site itself is mobile responsive, but the Facebook and Linkedin icons at the top of the homepage are not scaling and appear too large on mobile browsers.
I've tried many tweaks by adding custom CSS and nothing is working.
Can anyone give me some ideas on what the heck is going on?
Thanks!
Scott.
This will sort of fix it:
#media only screen and (max-width: 640px) {
.sqs-gallery-design-grid-slide {
width: 40px !important;}
img.thumb-image.loaded {
width: 20px !important;
height: 20px !important;
}
}
If you have access to the CSS file in Squarespace you will find this on site.css . Else you can add this to another css file.
I've encountered a problem when I'm trying to adjust my CSS after the user-device dimensions. I'm using the following code:
#media only screen and (max-width: 700px) {
#form input[type=text]
{
width: 100px;
height: 50px;
margin: 95px -60px 0 15px;
box-shadow: inset 0px 0px 3px 1px grey;
border:1px lightgrey solid;
border-radius: 4px;
text-align: center;
font-family: times;
font-size: 10px;
}
}
All settings apply properly and change the original CSS except the dimensions, which remain the same. How is this even possible? Is this a CSS bug? If some do apply the selector is correct and all, but the dimensions don't. It's not a cache problem, and I've tried on several devices.
I very much appreciate the help,
Fredrik
Can you post a link to your code?
Does the problem only occur on a mobile device? What happens when you resize the browser window to a width less than 700px?
Typically this kind of error is due to having selectors that are too specific somewhere else in your code, which makes them hard to override.
Try adding !important to the end of your declaration to see if the style can be overridden. Beware its generally bad practice to leave !important in there, so if that works for you search your code for the offending selectors and adjust it until your media query can override.