SanBer

Psychoterapy Philosophy :-)

Site URL: https://sandraberenice.com Hi! I'm designing my personal website and: 1. I resized my submark image to make it more suitable for the mobile version since it was very large. It's in the footer section. This is the code: @media screen and (max-width: 640px){ #block-13717a6122b0726c1a38{ width: 24% !important; margin: 0 auto; } } 2. I brought a Tabs plugin but it didn't include any CSS code to adapt it to the mobile version, so I read lots of posts and CSS coding and I did this: 2.1 Applied this into a block code, in the section where I included the tabs: <div class="row"> <div class="column"></div> <div class="column"></div> </div> 2.2 Then applied this in the CSS window: @media @mobile{ #block-yui_3_17_2_1_1638158536954_6387{ h2{font-size:12px; font-weight:bold} } #block-yui_3_17_2_1_1638158536954_6848{ p{font-size:16px !important} } } @media @mobile{ .column { float: left; width: 50%; }} /* Clear floats after the columns */ #collection-61a44f6b977e6d7ac151a435{ .row { display: flex; } .column { flex: 50%; } } It worked! the Tabs design looks so much better now in mobile, and the code affected the footer on THIS SINGLE PAGE and now looks better. I see it like it's in the desktop version; with three columns, BUT the submark image got too shrinked. I know it's because the CSS. I did something wrong. Can someone help me to resize my submark image on this page? Thanks for your kind answers!! P.S. a) the page where I have the Tabs and the image footer problem: #collection-61a44f6b977e6d7ac151a435 b) The block number of the submark image: #block-13717a6122b0726c1a38 c) Website password: sandra (7.1 version)