Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • October 17, 2019 at 4:18 pm #1148969
    tonyrwd

    Hi,

    I’m trying to left-align and right-align photos over a background in a color section. You can see what it looks like for now at the very bottom of my website https://www.thalassobainbebe.com/ (it is just a test for now)
    The thing is that i want each 3-photo column more to the left and more to the right. What can i do to get this result ? Does it have to do with the margin ? If yes, how can i change this ? Otherwise, i’m open to easy solution :)

    Thanks a lot for your help

    October 18, 2019 at 6:12 am #1149113
    Rikard

    Hey tonyrwd,

    If you want the container wider for that section only then you can use this CSS:

    .home #av_section_7 .container {
    max-width: 1400px !important;
}

    Best regards,
    Rikard

    October 18, 2019 at 8:22 am #1149170
    tonyrwd

    Good morning Rikard,

    Thank you very much for your answer. It did help a lot. However, the left 3-photo column is more to the left than the right one is to the right. Any idea how i can move the right column more to the right ? Or in other words, id like the same space between the borders of the screen and the 2 columns.

    Also, i used the same CSS code for section_6 but it seems not to be working. Basically you can see 2 rows of 3 photos. Id like the left and right columns to be more spread out to the sides

    See below the screenshots of how i did both sections. You may tell me there is a better way to do what I’ve been trying to do in both sections

    Section 7
    Section 6

    Thanks again for your help

    • This reply was modified 5 years, 2 months ago by tonyrwd.
    October 18, 2019 at 8:42 am #1149174
    tonyrwd

    Fyi, up to 1200px, left and right margins seems to be equal. But for some reason, at 1400, it’s unbalanced

    October 18, 2019 at 3:33 pm #1149299
    Victoria

    Hi tonyrwd,

    Best regards,
    Victoria

    October 18, 2019 at 3:38 pm #1149305
    tonyrwd

    Hi Victoria,
    Thank you for your message. However, the not centered one is the section just below, at th every bottom :)
    Also can you please tell me :
    1- How you show source code like in the screenshot ?
    2- How you checked the space on the sides (measurements + green/orange shapes) ?

    Thanks again

    October 18, 2019 at 7:47 pm #1149389
    Victoria

    Hi tonyrwd,

    Best regards,
    Victoria

    October 19, 2019 at 9:56 am #1149479
    tonyrwd

    Good morning Victoria,

    Thanks a lot for your help. That was a stupid mistake :s sorry for bothering you with it :(

    Just a last quick question could you tell me why the following CSS Code works for the very last section of the website but not for the one right above ?

    .home #av_section_6.container {
    max-width: 1400px !important;
    }

    .home #av_section_7 .container {
    max-width: 1400px !important;
    }

    In section 6, all images tend to stay in the middle of the website whereas in section 7 the code works and images use pretty much all the width of the section

    Again, thank you :D

    October 20, 2019 at 6:09 am #1149561
    Rikard

    Hi,

    There is no space between the section ID and the container class in your code, please try this instead:

    .home #av_section_6 .container {
  max-width: 1400px !important;
}

    Best regards,
    Rikard

    October 21, 2019 at 7:51 am #1149728
    tonyrwd

    That was a stupid mistake of me :( thanks a lot ! It now works :)
    I made some changes and was wondering : how can i remove ANY space between the dark blue line and the light blue zone ? I’m pretty sure that I did the right thing but it seems not to be working :s




    Have a good day and thank you for your help

    • This reply was modified 5 years, 2 months ago by tonyrwd.
    October 21, 2019 at 8:00 am #1149732
    tonyrwd

    Or i’m thinking : maybe instead of adding that dark blu line between two sections, it would be better to add a top border to the light blue section ? If yes, the problem is i did not find an easy way to pick a color and a thickness for this border :(

    October 21, 2019 at 10:38 am #1149783
    Victoria

    Hi tonyrwd,

    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

    
.hr-custom.hr-center.avia-builder-el-23 {
    padding-bottom: 20px;
}
.hr-custom.hr-center.avia-builder-el-23 .hr-inner {
    border-top-width: 5px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 21, 2019 at 7:48 pm #1149953
    tonyrwd

    Thank you for your help Victoria. It did work. However, i really wanted no space between that dark blue line and the light blue area. So what i did is that i removed that line and added a top border to the light blue section. However, you can barely see it (you can see right between the white and the light blue areas). Any idea how to change its color and its width ?

    Also, could you tell me (lol) how do you know all the CSS details of enfold ? I’d be happy to learn and do things myself if i could

    Thanks again for your precious help

    October 22, 2019 at 6:14 pm #1150250
    Victoria

    Hi tonyrwd,

    It is not really css for Enfold, all you have to know is how to look up the element on the page using Chrome devtools.

    Best regards,
    Victoria

    • This reply was modified 5 years, 2 months ago by Victoria.
    October 23, 2019 at 7:46 am #1150399
    tonyrwd

    Good morning victoria,

    I wish to remove the space where i put arrows (see on the screenshot)

    Thanks, have a greta day

    October 23, 2019 at 11:31 am #1150460
    Rikard

    Hi,

    Thanks for the clarification, though that space is not present on your site when using Chrome. Did you fix it already? If not then in which browser are you seeing that space?

    Best regards,
    Rikard

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