++++++++++++++++++++instruction for the code to be compatible with phone devices+++

++++++++++++++++

head section:
<meta name="view port" content="width=device-width,initial-scale=1.0">

explanation:

- The "viewport" refers to the area of the browser window where the web page is
displayed.
- width equal to the device width
- The initial-scale of 1.0 tells the browser to set the zoom level of the page to
100% when it first loads. This means that the web page will be displayed at its
actual size, without any zooming or scaling applied.

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++

astuce: if i want to diplay:none (for mobile) i have to obligatory use a class for
img .otherwise the image wont disappear

If i want to specifie a specific css to a type of device :

@media only screen and (min-width: 768px)
EXPLANATION :
-Media queries are used to specify different styles for different devices and
screen sizes.
-The only screen part of the query indicates that it should only apply to screens.
-The (min-width: 768px) part specifies the minimum screen width required for the
styles to be applied.