-
Posts
-
Hi,
I know that by adding :
.content, .sidebar { padding-top: 10px; padding-bottom: 10px; }
in the quick CSS , we can change the top and rbottom padding but how can we achieve the same for lef and right in a boxed layout ?
Hi Hyperdevbox!
Can you please post the link to your website and point out the changes you would like to make?
Regards,
YigitSure here it is
As you can see there is a wide padding around the content (in both desktop and mobile) that I had like to reduce a little, I would like the element to be closer to the main body image and see less “blue content content background”. I can reduce top and down using the CSS code but I would like to reduce to 10pix also on left and right.
Hi,
Please try the following in Quick CSS under Enfold–>General Styling:
.sidebar .widget { padding: 10px 0 10px 0 !important; }Best regards,
RikardHi,
As the left and right padding is already 0 you will not notice any change Please try changing the value of the 0 to a positive number. see the change.
example:
This is a shortcut way to define all 4 side and it works clockwise padding: top right bottom left;.sidebar .widget { padding: 10px 20px 10px 20px !important; }Best regards,
VinayWell that is doing nothing that I can see, plus none of your CSS suggestions are touching content, only widget and sidebar, OK eventually it does reduce the sidebar size content but I am not trying to reduce the content but to increase it, please check my first post, this is the only CSS QUICK code that is actually doing something on the website => it does reduce top and bottom margin / padding whatever you called it in the theme.. so is there anyway to reduce the margin/padding for the left and right so the content is taking more pixel space over the background and not see that huge border of 40 pixels or more ?
Hi,
Please use this to reduce padding of the container.
.container { padding: 0px 10px; } .content, .sidebar { padding-top: 10px; padding-bottom: 10px; }Best regards,
IsmaelHi,
On desktop
It does work better than before, it is almost OK, however is there a way to have the same space between the content and the separation of the side bar (see picture attached to know what I am talking about).On my mobile (with no sidebar then)
It does work only on the right side of the screen, the left side has the original padding ?!?!?Thank you,
Hi,
seems you could manage to do ti, as space if same for me now:
On mobile it looks good to me:
What changes do you want to achieve? Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)
Best regards,
AndyNo we did not, it just that the live website is using the default “no quick CSS” , please use the private URL (staged version) below to check with the suggested CSS addition .
Please kindly advise how to make it even spaced among the content and side bar areas.
Best Regards,
And here is a mockup screenshot of what we would like to get , space/padding is evenly distributed on the main content left-right & the side bar left-right.
Hi,
use this code:
.content .entry-content-wrapper { padding-right: 10px; }and adjust as needed.
Best regards,
AndyThank you very much,
Ok, it is getting better (link attached), however now we are just missing the side bar left padding , (right padding seems fine) , is there anyway to set also the same 10pix left padding in the sidebar too ?
edit : however using google chrome, on a mobile phone , screen size 1280×720, the 10pix padding does not work thought, are the settings different for mobile ?
Hi,
try this code:
.inner_sidebar.extralight-border { margin-left: 10px; }For mobile phones add media queries to your codes. For more infos: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Best regards,
AndyThank you but It does not work…., for the sake of clarity, this is how it is set right now in the QUICK CSS form :
.container { padding: 0px 10px; } .content, .sidebar { padding-top: 10px; padding-bottom: 10px; } .content .entry-content-wrapper { padding-right: 10px; } inner_sidebar.extralight-border { margin-left: 10px; }Hi,
try to add an !important to my code:
.inner_sidebar.extralight-border { margin-left: 10px !important; }If this does not help then send us admin access, so we can take a closer look into it.
Best regards,
AndyNo difference so far :( please find the admin access login on the staging account
Thanks again for your support in that matter.Hi,
you missed to add the first point in my code. I have corrected it and it’s working as expected now. Can you confirm please?
Best regards,
AndyThank you, it is indeed working, sorry my mistake when I copy pasted. So if we want to have this also for mobile, do we need to use the same code encapsulated within a :
@media
(min-device-width: 800px)
and (max-device-width: 1280px)
{// here put the same code
}
- You must be logged in to reply to this topic.