style: ajustes de espaçamento mobile

deco-sites · Mar 27, 2024 · 658fe53 · 658fe53
1 parent b5dd5ce
commit 658fe53
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/components/ui/ImagesAndBackgroundSide.tsx b/components/ui/ImagesAndBackgroundSide.tsx
@@ -29,7 +29,7 @@ function ImagesAndBackgroundSide( { bg, side }:Props ){
         <>     
             <div class="portatil:w-[80%] tablet:w-[80%] tablet:ml-[30px] portatil:ml-[30px]">
                 {side?.title && side.title !== '<p><br data-mce-bogus="1"></p>' && (
-                    <div class="[&_*]:text-[#ffffff] [&_*]:text-32 mobile:[&_*]:text-22 font-archimoto-medium font-black"
+                    <div class="[&_*]:text-[#ffffff] [&_*]:text-32 mobile:[&_*]:text-22 font-archimoto-medium font-black mobile:mb-[15px]"
                         dangerouslySetInnerHTML={{ __html : side.title }}>
                     </div>
                 )} 
@@ -38,7 +38,7 @@ function ImagesAndBackgroundSide( { bg, side }:Props ){
                         dangerouslySetInnerHTML={{ __html : side.description }}>
                     </div>
                 )} 
-                <div class="grid grid-cols-2-auto grid-rows-2 gap-y-[20px] gap-x-[10px] tablet:max-w-[70%]">
+                <div class="grid grid-cols-2-auto grid-rows-2 mobile:gap-y-[14px] mobile:gap-x-[7px] gap-y-[20px] gap-x-[10px] tablet:max-w-[70%]">
                     {side && side.device?.map(( { desktop, mobile, alt} )=> {
                         return(
                             <>

diff --git a/sections/Content/ImagesAndBackground.tsx b/sections/Content/ImagesAndBackground.tsx
@@ -45,7 +45,7 @@ interface Props{
 function ImagesAndBackground( { bg, sideLeft, sideRight }:Props ){
     return(
         <>
-            <section class="md:n1-container md:px-[120px] mobile:px-[20px]">
+            <section class="md:n1-container md:px-[120px] mobile:px-[20px] mobile:mt-[80px]">
                 <div class="relative flex mobile:mb-[80px] tablet:mb-[80px]">
                     {bg && (
                         <div>

diff --git a/sections/Content/TitleTextIconsAndImage.tsx b/sections/Content/TitleTextIconsAndImage.tsx
@@ -150,7 +150,7 @@ function TitleTextIconsAndImage( props: SectionProps<ReturnType<typeof loader>>
                 <div class="md:n1-container md:px-[120px] relative">                
                     <div 
                         class={clx(`${flexRow ? FLEXROW[flexRow] : ""} ${flexCol ? FLEXCOL[flexCol] : "flex-col-reverse"}
-                        text-[#ffffff] flex items-center portatil:flex-col portatil:my-[34px]`)}
+                        text-[#ffffff] flex items-center portatil:flex-col portatil:my-[34px] mobile:gap-y-[50px]`)}
 
                         style={{ 
                             columnGap: device === 'desktop' && spaceTextAndImage ? spaceTextAndImage + 'px' : '30px'
@@ -164,8 +164,8 @@ function TitleTextIconsAndImage( props: SectionProps<ReturnType<typeof loader>>
                                 <div class="md:ml-[20px]">
                                     { title && title !== '<p><br data-mce-bogus="1"></p>' && (
                                         <div 
-                                            class={clx(`[&_*]:font-archimoto-medium [&_*]:font-black mobile:max-w-[80%] 
-                                            mobile:[&_*]:text-32 [&_*]:tablet:text-34 [&_*]:md:text-48`)}
+                                            class={clx(`[&_*]:font-archimoto-medium [&_*]:font-black
+                                            mobile:[&_*]:text-24 [&_*]:tablet:text-34 [&_*]:md:text-48`)}
                                             dangerouslySetInnerHTML={{ __html: title }}>
                                         </div>
                                     )}
@@ -229,7 +229,7 @@ function TitleTextIconsAndImage( props: SectionProps<ReturnType<typeof loader>>
                         </div>
                         {image && (                            
                             <div class={clx(`${activePositionManualImage ? 'xl:absolute portatil:min-w-[50%]' : ""}
-                                mobile:mb-[68px] tablet:mb-[50px] mobile:px-[25px]`)}
+                                tablet:mb-[50px]`)}
                                 style={{
                                     right: `${device === 'desktop' && activePositionManualImage ? positionImageX + 'px' : 0 }`,
                                     top: `${device === 'desktop' && activePositionManualImage ? positionImageY + 'px' : 0 }`