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;
}
}
Related
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 :)
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 am helping with the port of a site to a new server. All of this is inherited code. An example page is this one: http://fcxcobalt.fmi.com/products/
This heading:
<h1 class="main-content-heading"><span class="wrapper">Products</span></h1>
At screen widths less than 1690px the heading aligns as desired:
But at 1690px and higher widths the element left aligns to the body of the document.
The heading's own CSS may not be the issue but it is
.main-content-heading {
margin: 0 0 1.2em;
padding: 0.5em 0;
font-weight: 300;
color: #fff;
background: #1c3f94;
text-transform: uppercase;
}
Unminified CSS can be seen here: http://pastebin.com/s5MVMZVj
Can anyone advise me as to how this alignment can be made consistent?
What you are seeing here is the result of a media query in the CSS:
#media screen and (min-width:1707px){
.wrapper,.page-head,.site-menu,.droplets,.wide-content{
margin:0 auto
}
}
#media screen and (max-width:1040px){
.wrapper,.page-head,.site-menu,.droplets,.wide-content{
margin:0 3%
}
.bx-aspect-wrapper{
margin-bottom:-10em
}
.bx-pager{
right:3%
}
.bx-slide-caption,.bx-prev,.bx-next{
font-size:130%
}
}
The switch over takes place at 1707px (you estimated 1690px, well spotted!).
This is an example of a responsive design, and my guess is that the designer wanted to keep some left/right margin for smaller screens where as margin: 0 auto would lead to the margins collapsing all together.
There is nothing wrong with your browser and the CSS is working as intended.
Of course, the sharp transition may be a bit unsightly to some.
This might be made smoother by setting margin: 0 Mpx where M is a magical number of pixels that might be close to (1707px - {page layout width in px})/2, but you would have to try it to see.
Fixing Layout Glitch for Widths Greater Than 1707px
I found that if I leave out the margin: 0 auto declaration in the following CSS snippet, the "Product" label stays where it is suppose to.
I tested this in Firefox only.
#media screen and (min-width:1707px){
.wrapper,.page-head,.site-menu,.droplets,.wide-content{
margin:0 auto
}
}
On the site I'm working on, for some reason the margin is needing to be different for Safari than in FF, IE8, Chrome & Opera? I have a link that I want lined up next to a label. It's lining up fine in all but Safari which needs a 12 pixel difference. Here's a screenshot to better describe the issue: Click
The Safari screenshot shows the label down too low. This is the CSS I use for the working 4 browsers:
.submitter a {
float: right;
margin: -2px 0 0 2px;
padding: 0 !important;
}
And here's the code that works for Safari, however, usig it throws the link UP 12 pixels.
.submitter a {
float: right;
margin: -14px 0 0 2px; Works in Safari & Chrome
padding: 0 !important;
}
Anyone able to shed some light on this? TIA
This seems to sort it out:
.submitter a {
float: none;
display: inline !important;
margin: 0 0 0 2px;
}
It's really very convoluted in there due to nonsensical use of the cascade.
Some rules are being applied to elements where they really shouldn't be due to selectors like:
.box_777 ul li a
You'd be better replacing that selector with something like:
.individual-likes > a
But, it's difficult to predict how improving your selectors will change how your page displays.
The reason it goes up like that could be because of the - pixel value. Are they nested correctly in the div? And did you apply the same alignment (CSS, Html, etc.) for the Chrome buttons?
There is a lot going on, but you might try one of the following:
.submitter .smalltext { float: left; }
(or)
Move the "follow" anchor tag before the "smalltext" span
Looking at the site, the anchor is being set to block by .box_777 ul li a and then floated right by .submitter a.
If I remove the display: block; and float: right; things align.