Reduce the size of the cards

[cdevl3749]

Good evening,

I would like to reduce the size of the maps and keep the alignment so that it remains aligned with the rest of my website.

Thank you for your help.

/*decoration*/
.decoration {
    padding: 20px 10%;
}


.deco-list .deco img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.deco-list .deco {
    text-align: center;
    cursor: pointer;
    padding: 10px;
    transition: 0.5s;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    margin: 0 0 1rem;
}

.deco-list .deco:hover {
    transform: scale(1.1);
}

.deco-list .deco p {
    margin: 5px 0;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.deco-list .deco span {
    font-size: 15px;
    color: #333;
    display: block;

}

.deco-list .deco .orange_link {
    margin-top: 5px;
    border: 1px solid #f26440;
    letter-spacing: 1px;
    width: 100%;
    transition: 0.5s;
    cursor: pointer;
}

.deco-list .deco .orange_link:hover {
    background-color: transparent;
    color: #f26440;

}

/* pagination changes */

.pagination {
    text-align: center;
    margin-top: 2rem;
}

.pagination a {
    color: #f26440;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid #f26440;
    margin: 0 5px;
    border-radius: 4px;
}

.pagination a:hover {
    background-color: #f26440;
    color: white;
}

.pagination .active {
    background-color: #f26440;
    color: white;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}


.card img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    border-radius: 10px;
}

#page-numbers {
    margin-top: 20px;
    font-size: 16px;
}

[PaulOB]

@cdevl3749

I would like to reduce the size of the maps

Where are the maps?

Or did you mean something else?

[cdevl3749]

Good morning,

Oupsss indeed I forgot to indicate the CodePen.

https://codepen.io/aaashpnt-the-sans/pen/VwJaxjL

[PaulOB]

@cdevl3749

so that it remains aligned with the rest of my website.

Its not clear what you want the cards to be aligned with because on that page there is only the cards and the filter row? There is no ‘rest of website’ so I don’t know what you want aligned with what

I would suggest that you don’t use percentage padding or percentage widths to centre the page but rather use a max-width in px (or rem) to stop the page getting to wide and then use margin: auto to centre it.

e.g.

.decoration{
  padding:20px 1rem;
  max-width:1180px;
  margin:auto;
}
.container{
  width:auto;
}

Also rather than setting widths on individuals sections it would be better to have your content controlled on one wrapper and then the internal elements will always fit that wrapper if designed correctly.

If you can clarify the problem you are having then perhaps I can offer a better method?

[cdevl3749]

Thank you for your help and solution.

In fact I would just like to reduce the size of each image.

Here is all my code, can you help me to ensure that my page all the elements are well aligned because I think my css is not good

https://codepen.io/aaashpnt-the-sans/pen/mdZWKrb

[PaulOB]

@cdevl3749

In fact I would just like to reduce the size of each image.

You can reduce the size of each image but you need to think about how you want the design to look.

If you give the image a max-width so that it doesn’t get too big using additional code like this:

.home .left img,
.home .right img,
.about .image img{
  max-width: 500px;
  height: auto;
  display:block;
}
.home .left img {
  margin: auto auto auto 0;
}
.home .right img {
  margin: auto 0 auto auto;
}

Then the problem will be that there will be white space between your text on the left and the image on the right because you have set one to 55% and one to 45% width. If the image is smaller then you have the whitespace where the image would have filled.

On the other hand if you allow the text to stretch the line length becomes too long on wide screens. It may simply be that you should go for a narrower screen to start with using a max-width as I mentioned before rather than stretching to infinity. On my 2500px screen the design is far too wide to be readable.

These are really design issues rather than css issues as such so you really need to decide what you want:)

[cdevl3749]

@PaulOB

Then the problem will be that there will be white space between your text on the left and the image on the right because you have set one to 55% and one to 45% width. If the image is smaller then you have the whitespace where the image would have filled.

On the other hand if you allow the text to stretch the line length becomes too long on wide screens. It may simply be that you should go for a narrower screen to start with using a max-width as I mentioned before rather than stretching to infinity. On my 2500px screen the design is far too wide to be readable.

These are really design issues rather than css issues as such so you really need to decide what you want:)

Thank you for all this information.

In fact I would just like my web page to be cleaner and I don’t go too far in my code and I can’t make my web page something clean.

https://codepen.io/aaashpnt-the-sans/pen/mdZWKrb

[PaulOB]

@cdevl3749

In fact I would just like my web page to be cleaner and I don’t go too far in my code and I can’t make my web page something clean.

I don’t have a lot of time today but I would use a page-wrapper for everything except the footer and use a max-width instead of all your percentages. (This would make everything line up more easily.) Then remove a number of the widths and percentage padding from inner elements.

Here’s roughly how I would do it although I would use rem instead of px for a lot of your px sizes.

I removed the absolute positioning from the statistics and put it back in the flow by letting the flex box wrap and setting that item to flex 100%. I removed some heights as you don’t want heights on elements that use fluid content. I removed the floats on the form and used display: table-cell instead so you don’t need to match the height with a fixed ox.

I adjusted a number of settings so that you don’t get a vertical scrollbar at smaller sizes.

I also made the images smaller in the eft and right sections and centred them vertically instead of 100% height.

You repeated yourself a lot and I didn’t have time to rationalise it all but when you have similar sections you should use a common class rather than creating a new class and use most of the original code. That’s just duplicating stuff for no purpose and makes it hard to change easily in one go.

Hope it helps

[cdevl3749]

A big thank you to you for your help, it’s much cleaner like that, I would never have arrived without you.

I still have some questions :

The logo and the register and start button are sticking to the frame, wouldn’t it be better to move them away? If yes, how ?

I succeeded with a margin-left: 15px;

On the other hand, I can’t move the “register” button

[PaulOB]

Why would you want to move the logo and the register button?

At the moment the left edge of the logo lines up with the left edge of the main content and the register buttons right edge lines up with the right edge of the content.

If you indent them then that will look a bit odd to me! If you really want to indent them then add some side padding to the header element.

header{padding:20px 10px;}

Or were you referring to something else?

The page-wrap element has padding left and right so no elements will be hard to the browsers edge at any time.

[cdevl3749]

I thought that by removing the logo and the other elements sticking to the frame it would look prettier.

I didn’t understand the filling correctly?

[PaulOB]

@cdevl3749

sticking to the frame

What exactly do you mean by frame?

I may be misunderstanding what you want

[cdevl3749]

Good morning,
In fact I can’t align the logo with the menu.

And I would like to move the “register” button.

For the “start” button I can’t make a hover because I think it uses the same class as the “register” button

For the frame I meant the gray background

[PaulOB]

@cdevl3749

And I would like to move the “register” button.

Where do you want to move it to and why? As I said before it will look odd and you put the whole page alignment out of kilter.

It can easily be moved right by applying a margin to it.

e.g.

.link_buttons{
  margin-right:1rem
}

However as I said a few times that looks odd and now doesn’t match anything. You have to stop micro managing every element and let them sit naturally along with other elements.

@cdevl3749

In fact I can’t align the logo with the menu.

It looks perfectly aligned on the vertical center line to me. What did you want it to look like?

@cdevl3749

For the “start” button I can’t make a hover

You used the orange_class which you have in the header so you would have been better using a new class. However you can modify it by context.

.left .orange_link:hover{
  background:white;
  color:#f26440;
  outline:1px solid #f26440;
}

However you probably should have set up a custom class for those types of buttons and given them a unique class name and not a class name based on its color. What happens if you decide you want the buttons the color red at a later date. You will then have an orange class in the html but the css is red! That’s just confusing.

[cdevl3749]

Indeed you are right the alignment is perfect as you did.

I quibble too much with details.

Thank you very much for your help and patience.