Work (Blog) page - integration of Sendinblue subscribe by email form

[810311]

This post is related to About page - 960 grid

I have Sendinblue email subscription form which I’d like to embed on the blog page https://test.prygara.com/work/

I copied and pasted form’s HTML, CSS and JS for now just to test it on my subdomain with Bluehost to make sure it sends newsletters about new blog posts. I think I have some flexibility in terms of tweaking HTML and CSS. I think Sendinblue allows it even though I am on a free plan.

I have 2 questions:

1. Can I just delete all default CSS and then use my own? Anyone integrated such form before? I know I can’t delete JS because the form relies on it to react to user interaction with the form.

2. Right now the form sits just above section to which I applied a simple grid to organize Wordpress blog post

.blog .site-main section{
  display: grid;
  grid-template-columns: 2fr 2fr;
  
  // outline: 1px dashed blue;
}

I am not sure how I can put it below the line produced by the following rule…(see screenshot)

.site-main article {
    padding: 1rem 0 0.5rem 0;
    border-top: 2px solid #808080;
}

[PaulOB]

@810311

Can I just delete all default CSS and then use my own? Anyone integrated such form before?

I have no knowledge of the Sendingblue email form but generally with third party software you would not change the default css but create a custom over-ride theme of your own. In that way you are less likely to break the form should it be updated at some time. It looks like theres very little to over-ride anyway as its a small form.

@810311

I am not sure how I can put it below the line produced by the following rule

Why can’t you just put it there? You’ve inserted it above the element so I’m not sure why you are expecting it to be somewhere else. It can’t go in the middle of those 2 columns anyway as they are grid columns. Why don’t you just place it above the 2 columns.

I think I’ve misunderstood what you meant

[810311]

@PaulOB

Why don’t you just place it above the 2 columns.

I tried putting it before the loop within section to which grid is applied. It becomes a grid item and just sits to the left of the first blog post (all blog posts articles are produced by index.php and content.php by running a while loop but I think number of posts shown can be controlled via WordPress dashboard). I wonder if I should adjust the grid somehow for that page by say creating a row to contain the form…

[PaulOB]

@810311

I wonder if I should adjust the grid somehow for that page by say creating a row to contain the form…

Yes, set up a grid area with one row followed by 2 columns.

Here is the basic structure.

(Sorry I didn’t have time to match it to your code but it will be a good learning experience anyway)

Actually you could probably just span the first item anyway using :

grid-column: 1/-1;

[810311]

@PaulOB

Actually you could probably just span the first item anyway

I did. As to over-rides of form inline styles, I just used !important; as suggested in this article. Not sure if its a proper way but it worked
Please take a look when you get a chance

[PaulOB]

@810311

I just used !important;

Yes you need !important when you over-ride an inline style. That’s the only way it works and about the only time you will need it.

<div class="sib-form" style="text-align: center; background-color: #EFF2F7;">

That’s why it’s best to avoid using inline-styles when you are able (but often third party code does it on purpose).

[810311]

My original video files that I uploaded to WordPress are mp4, 16:9 aspect ratio, frame width: 640, frame height 360.

I was experimenting with videos’ width and height to make videos a little more bigger so they take more of white space on work page (please see original link in post #1 in this thread). I checked whats the next resolution that comes after 640 x 360 within 16:9 aspect ratio and it appears it is 854 x 480. So I just used WordPress PHP function to set videos to 854 x 480 on the backend and then changed the videos dimensions using the following CSS. Is it OK or should I do it differently?

.archive article,
.blog article {
  max-width: 854px;
  margin: 0 auto;
  font-size: 1.2rem;
 
}

.wp-block-embed iframe {
  width: 854px;
  height: 480px;
}

[PaulOB]

I would use a fluid width video and let it fit all screens without needing media queries.

If you set the width to a percentage and the height to auto it will maintain its aspect ratio. You can of course also set min and max widths if required.

Fluid Width Video | CSS-Tricks

[810311]

@PaulOB

If you set the width to a percentage and the height to auto

I tried this

.wp-block-embed iframe {
  max-width: 854px;
  width: 100%;
  height: auto;
}

and it squeezes the videos as shown in that CSS Tricks article (see section of the article about Youtube video wrapped in iframe) because WordPress wraps them in iframe I guess…

[PaulOB]

I would do this but note that there is no IE11 support (which I don’t support anyway these days).

.wp-block-embed iframe{
width:100%!important;
height:auto!important;
aspect-ratio:16 / 9;
}

[810311]

@PaulOB

aspect-ratio:16 / 9;

That was new to me. Thank you.

I updated CSS based on your suggestion and it works for me. Following is the code I have now.

.blog article,
.archive article {
  max-width: 854px;
  margin: 0 auto;
  font-size: 1.2rem;
 
}

.wp-block-embed iframe {
  width:100%!important;
  height:auto!important;
  aspect-ratio: 16 / 9;
}