Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 7, 2021 at 3:39 am #1309000
    aussiedropbear

    Hi,

    I have a ‘contact us’ page with a color section at the top with a colored background and some text.

    Below this I have a grid row and in this cell I have an image as a background.

    I am wanting to have the image in the grid row so that it is flush with with the color section, that is, no gap / line between the two so that that look cohesively as one.

    I have tried placing a negative pixel (e.g. -200) in the top padding hoping this would close it up. No luck :( .

    I have a similar example in the footer on the page but no padding adding to the grid row image and it places itself flush to one another and looks great.

    Its quite likely its a simple thing I am overlooking .

    Any assistance appreciated.

    Cheers
    John

    July 8, 2021 at 3:13 am #1309173
    Rikard

    Hi John,

    Please try the following in Quick CSS under Enfold->General Styling:

    .page-id-35 #av-layout-grid-1 .av_one_full {
    height: 60px !important;
    min-height: 60px !important;
}

    Best regards,
    Rikard

    July 8, 2021 at 3:57 am #1309179
    aussiedropbear

    Thanks Rikard. That worked.

    If I wanted this for other pages would i just drop: .page-id-35

    Thanks
    John

    July 9, 2021 at 5:51 am #1309340
    Rikard

    Hi John,

    If you have the same type of layout on the other pages, then yes, you can simply remove the page ID class. If the layout is different, then you might need other CSS.

    Best regards,
    Rikard

    July 9, 2021 at 8:27 am #1309349
    aussiedropbear

    Hi Rikard,

    I think I need a different solution as another issue has cropped up to do with grid rows and is throwing out what i have in place there.

    I have grid rows on some pages that I also use to create a colored horizontal line across the page that I use to break up various sections. I have the height of these grids set to 2px with the cell within set to the background to a color I need. An example of this can be found on the home page directly under the layerslider. It would seem to be picking up the CSS height of 60px from what you have and is creating a very thick orange line.

    Thanks
    john

    July 11, 2021 at 5:32 am #1309531
    Rikard

    Hi,

    Thanks for the update. It’s probably better if you assign a class to the element which you had problems with first then, after that we can give you more specific CSS to use.

    Best regards,
    Rikard

    July 12, 2021 at 2:24 am #1309629
    aussiedropbear

    Thanks Rikard,

    I’m a little unsure of that but have added to the grid row developer settings the class: blue-wave-down

    Thanks
    john

    July 13, 2021 at 5:22 am #1309874
    Rikard

    Hi,

    Thanks for that. I replaced the CSS you tried yourself with this:

    #bluewavedown .av_one_full {
    height: 60px !important;
    min-height: 60px !important;
}

    And it’s applying to your site now, please review it.

    Best regards,
    Rikard

    July 13, 2021 at 6:42 am #1309880
    aussiedropbear

    Thanks Rikard.

    Just brilliant.

    Please close thread.

    Cheers
    John

    July 13, 2021 at 5:25 pm #1310008
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘close gap between two elements’ is closed to new replies.