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.
Related
The site is falboretirement.com. However you need to access it via the link http://falboretirement.com?bypass=jks, because there is a "coming soon" page that otherwise blocks access. For the desktop version, the hero background image of the happily retired business man jumping in the clouds is the image I want. But, on smaller screens, I want to substitute a solid blue. I've uploaded a blue.gif to the website to use.
This is a commercial wordpress theme that I am using and I noticed that the theme CSS contains a
.vc_custom_1565817449198 {
background-image: url(https://falboretirement.com/wp-content/uploads/iStock-638087592_1920X600-60-2.jpg?id=1443) !important;
}
which is the code that is setting up the correct background image for large screens. I'm wondering if the theme author's use of !important is preventing me from being able to override the background image to set it to a solid blue?
I tried using a very specific selector, in the hopes of overriding, but its not working... here is the code that I have tried
#media screen and (min-width: 320px) and (max-width:1024px) {
div#freedom-retire.vc_row.wpb_row.vc_row-fluid.businessman.vc_custom_1565817449198.vc_row-has-fill.vc_row-no-padding.vc_row-o-full-height.vc_row-o-columns-middle.vc_row-flex {
background-image: url (https://falboretirement.com/wp-content/uploads/blue.gif) !important; background-repeat: repeat !important;
}
}
I also tried:
#media screen and (min-width: 320px) and (max-width:1024px) {
div#freedom-retire.vc_custom_1565817449198 {
background-image: url (https://falboretirement.com/wp-content/uploads/blue.gif) !important; background-repeat: repeat !important;
}
}
I verified that the blue.gif is in the folder specified, but I have not been successful.
I hope that you can fix the issue by removing the space between URL & Bracket.
I have been trying to change the code for ages, nothing seem to change on phone and tablet, white space between the header and content still appears but only on phone and tablet.
LINK to website
If you add css code given below, then your issue will be resolved.
#media only screen and (max-width:767px) {
body {
padding-top: 0px !important;
}
}
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 :)
my site is http://psychicrx.com/ it seems normal till i get down to mobile view been looking around for a solution and not sure what to do It gives me a full screens worth of white space when i check it on mobile and have to scroll down to see the site content please help i am getting frustrated that i cant find this in the css and i dont know maybe there is a good plugin that would edit the code for me that is causing this issue thanks in advance
Your #mobile-navigation, #mobile-navigation-jquery goes to display:block when in mobile mode.
Change this:
#media screen and (max-width: 620px)
#mobile-navigation, #mobile-navigation-jquery {
display: block;
}
to
#media screen and (max-width: 620px)
#mobile-navigation, #mobile-navigation-jquery {
display: none;
}
The nav is occupying that space. You have to make it have no width when it gets to mobile.
#media screen and (max-width: 620px) {
.
.
.
width: 0;
}
The problem was a little css with #mobile-navigation-jquery i just put it to width 0 and it works fine now also i used a plugin that worked real well without me having to edit the themes css thanks
I am trying to hide a Facebook like button when the browser is resized below a certain width.
I have the following code:
#media all and (max-width: 300px)
{
.fb-like { float: right; display: none; }
}
I have tested this on regular websites however it is not working within Shopify. Any ideas as to why?
It seems I could not reference "fb-like" within css I had to create a separate div to wrap around this before I could edit how it was displayed.