-
Posts
-
Hi team,
in the desktop view i have added padding to my images and text box. but for the mobile view i do not want padding in the images. how can i achieve that?
Hi, possible to provide one example?
I went to the custom css file and got this,
@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */}
Below is my home page, what do i add into the bracket if i want to remove padding in mobile view?
Hi,
Could you try adding the code you have for desktop inside this code instead:
@media only screen and (min-width: 768px) { YOUR CURRENT CODE FOR DESKTOP GOES HERE }to see if that works please?
Best regards,
RikardHi!
In your first post you mentioned that you have added padding to your images, let us say your code looks something like this
img { padding: 10px; }You should change it to following one
@media only screen and (min-width: 768px) { img { padding: 10px; } }So it would be only applied on desktops
Best regards,
Yigitthanks, but how can i apply the changes to only certain images or column?
I tried inspect element with chrome and the css will be something like element.style { padding: 30px; }
some of my columns have padding of 30px and some with 10px, so how can i further customise it?
possible to set a class to an image or column?
Hey!
You can turn on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and give your columns or images a custom CSS class and use your code to target them only
Cheers!
YigitHi Team,
i added the custom css tag ‘DA-mobilenopadding’ and tried applying the css into a code block as follows,
@media only screen and (min-width: 768px)
.DA-mobilenopadding img {
padding: 10px;
}but doesn’t work.
Hey!
Please change your code to following one
@media only screen and (min-width: 768px) { .DA-mobilenopadding img { padding: 10px; }}Regards,
YigitHi, i tried adding into the code box but won’t work.
Please see, http://screencast.com/t/r47dDX9vB0zn
Hi!
Do you mind creating a temporary admin login and posting it here privately so we can look into it?
Best regards,
YigitHey!
It should be wrapped inside a style tag. Please check it now: http://nudestrength.com/
<style> @media only screen and (min-width: 768px) { .DA-mobilenopadding img { padding: 10px; }} </style>Cheers!
IsmaelHI Team,
Thanks but in the mobile view the padding still exist, how do i remove padding in mobile view and have the image take the whole span of horizontal space?
Hey!
Use this in the Quick CSS field in order to decrease the padding:
@media only screen and (max-width: 767px) { .responsive #top #wrap_all .container { width: 98%; max-width: 98%; } }Set the width and max-width to 100% if you want to remove the padding completely. Remove browser cache or history before checking the page.
Regards,
IsmaelHey!
you are using this code:
@media only screen and (min-width: 768px) .DA-mobilenopadding img { padding: 10px; }}which is causing padding on the image showing on your screenshots. Remove it and then you can use something like this to remove padding on all your images for mobile:
@media only screen and (max-device-width: 736px) { .responsive #top #wrap_all .flex_column { padding-top: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; }}Regards,
AndyHey!
If you would like to apply the changes globally, you can add it to Quick CSS field. If you would like to apply the changes on a certain page, please edit your page, add code block into your content and add following into
<style>@media only screen and (max-device-width: 736px) { .responsive #top #wrap_all .flex_column { padding-top: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; }}</style>Regards,
YigitHey!
If you would like to apply the changes only on certain elements, yes. If you have not enabled custom CSS field for ALB elements, please do so – http://kriesi.at/documentation/enfold/updating-your-theme-files/ and then give your columns a custom class and then use the code as following
@media only screen and (max-device-width: 736px) { .your-custom-class.flex_column { padding-top: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; }}Cheers!
Yigit
- You must be logged in to reply to this topic.