Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • August 3, 2018 at 11:31 pm #993374
    asapevictions

    Greetings,

    I added some Inner Padding on Element to center it better and it looks great on desktop. When I view the website on mobile and tablet thought things look cramped, not centered, and off. How would I go about making the padding only for desktop and not mobile and tablet?

    August 4, 2018 at 8:13 am #993446
    Rikard

    Hey asapevictions,

    Thanks for the link, maybe it would be better if you used 1/4 elements for that layout instead? Then you wouldn’t have to apply padding.

    Best regards,
    Rikard

    August 6, 2018 at 7:24 pm #994048
    asapevictions

    I tried the 1/4 padding but the elements get more scrunched. I need the full line to show – if that make sense. I just changed it to 1/4 to see what I mean.

    August 7, 2018 at 12:59 pm #994397
    Victoria

    Hi asapevictions,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .flex_column.av_one_fourth.avia-builder-el-8, .flex_column.av_one_fourth.avia-builder-el-13 {
    display: none;
  }
  .responsive #top .flex_column.av_one_fourth.avia-builder-el-9 {
    margin-left: 0;
    clear: none;
    width: 48%;
  }
  .responsive #top .flex_column.av_one_fourth.avia-builder-el-11 {
    margin-left: 4%;
    clear: none;
    margin-top: -2px;
    width: 48%;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 7, 2018 at 10:53 pm #994603
    asapevictions

    Nothing seems to happen when I add that code. I tried it both in the css file and quick css

    August 8, 2018 at 10:21 am #994800
    Rikard

    Hi,

    Victoria code will only apply to tablet sizes, maybe that is not what you want? You can adjust the media query on this line:

    @media only screen and (min-width: 768px) and (max-width: 1024px)

    Or remove it completely, don’t forget to remove the curly brackets as well if you decide to try that.

    Best regards,
    Rikard

    August 8, 2018 at 7:38 pm #995123
    asapevictions

    On desktop I would also like it to be a full line. Do I need to add that column padding again?

    August 9, 2018 at 8:50 am #995301
    Nikko

    Hi asapevictions,

    I have checked your site in desktop, tablet and mobile and it looks great on my end.
    Can you give us a screenshot on how it looks on your tablet or mobile phone?
    You can upload the image/screenshot in https://imgur.com/ or any online image sharing sites and post the link here.
    You can also post it in private content if you want it only to be seen by moderators.

    Best regards,
    Nikko

    August 9, 2018 at 6:22 pm #995640
    asapevictions

    Tablet and mobile look fine. The only thing the doesn’t look right is desktop. I’m trying to have them on one line, two columns centered. Right now they are 2 lines. Originally I had it at two 1/2 columns with spacing on the left to achieve this. I took it off though seeing I was recommend to try 4 columns but that scrunches things up too much…

    Should I change it to only 2 columns again with the padding on the left to center things on desktop? Will this code still apply?

    I created a cloned page to show you how it was initially. The new page in private looks fine now on desktop but on mobile and tablet don’t.

    Hope this helps!

    T

    August 10, 2018 at 1:36 pm #995949
    Victoria

    Hi asapevictions,

    Did you change the columns after I gave you the code? The element numbers can be different and so the code will not work.

    Best regards,
    Victoria

    August 10, 2018 at 7:03 pm #996133
    asapevictions

    No, I did not change the numbers prior. I think you might have stepped in before I changed it back… I changed to the 1/4 to show what I didn’t like about it. Right now there are 2 versions – one at 1/4 columns with your code and one at 1/2 columns with no code.

    The second link is how I want it to look on the desktop. The mobile and tablet dont look good though.

    August 12, 2018 at 5:13 am #996397
    Mike

    Hi,
    I have taken a look and using the second link, which you like on desktops, as the starting point, I notice that you have a left padding of 210px to make the columns look centered.
    Now we will reduce that padding for tablet and mobile, with this code:

    @media only screen and (min-width: 767px) and (max-width: 1024px) {
.page-id-1183 .flex_column_div.first.avia-builder-el-8 {
padding-left: 10% !important;
}
}
@media only screen and (max-width: 767px) {
.page-id-1183 .flex_column_div.first.avia-builder-el-8 {
    padding-left: 0px !important;
    display: flex !important; 
    justify-content: center !important; 
}
.page-id-1183 .flex_column_div.avia-builder-el-10 {
    display: flex !important; 
    justify-content: center !important; 
}
}
@media only screen and (max-width: 550px) {
.page-id-1183 .flex_column_div.first.avia-builder-el-8 {
    margin-left: -3% !important; 
}
}

    This code is for the second page only to see if this is what you are looking for.

    Best regards,
    Mike

    August 13, 2018 at 8:07 pm #996856
    asapevictions

    Works Thanks!

    August 14, 2018 at 4:39 am #996943
    Mike

    Hi,
    Glad to hear, Unless there is anything else we can assist with on this issue, shall we close this then?

    Best regards,
    Mike

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.