Skip to content
OverviewSolutions
73
Comments
7
Thomas Sankara
@SankThomas

All comments

  • Thomas Sankara•1,280
    @SankThomasPosted about 2 years ago

    Pretty neat solution.

    I noticed that beginning on tablet size screens, the content seems a bit squeezed. So I would add some padding or margin on the left and right to push it inwards, and I would still display the image and text as a stack, one on top of the other, and then display them side by side when I get to larger devices.

    Just my thoughts.

    Marked as helpful
    0
  • Ana Priscilla F.•50
    @AnaPriscillaSubmitted almost 4 years ago

    I still don't know how to work properly with JavaScript! Could someone tell me how to make the arrow turn and stay, when I activate the summary I implemented?

    HTML, CSS

    1
    Thomas Sankara•1,280
    @SankThomasPosted almost 4 years ago

    Hello Ana. When you say "make the arrow turn and stay" I'm thinking you mean like the rotation animation? You could add a class on the icon which you can then target in JavaScript using querySelector and then add the toggle method on it when you click it: For example:

    /* CSS */
img.clicked {
    transform: rotate(90deg);
    transition: transform 0.4s;
}

/* JS */
/* 
Select the icon. Be careful when using querySelector because it will select
the first element that matches the argument passed in. So if you have other images
before the icon that you want to select then it might not work.
In such a case, assign an `id` to your icon in HTML, e.g id="arrow-icon" and
then you can select it as `document.querySelector('#arrow-icon')
*/

const img = document.querySelector('img')

/* 
Add a click event listener to your icon to toggle the class of `clicked` 
above every time it is clicked 
*/
img.addEventListener('click', () => {
    img.classList.toggle('clicked')
})

    I hope this gives you an idea and it helps...

    0
  • Thomas Sankara•1,280
    @SankThomasPosted almost 4 years ago

    This is actually a very nice solution. Just one thing though...you don't have to be sorry about making mistakes. You will learn from them to build even better solutions and websites...

    0
  • Thomas Sankara•1,280
    @SankThomasPosted about 4 years ago

    For some reason the background doesn't show up in the screenshot.

    0
  • Thomas Sankara•1,280
    @SankThomasPosted about 4 years ago

    Hey @0sophietaylor, I've gone through your code. I've noticed you've defined actual heights for your containers, .central box, .left-box...usually when you do this, what happens when scaling down to smaller screens is that the content, when it becomes bigger, will go outside of the defined height, which is why you can see the writings are overlapping.

    So, I recommend you use paddings or margins (from my own personal experience) instead because they will always remain when scaling down unless you redefine them in your @media queries (responsive design).

    Thanks...

    0
  • Thomas Sankara•1,280
    @SankThomasPosted about 4 years ago

    That is pretty neat

    1
  • nganbarova•190
    @nganbarovaSubmitted about 4 years ago

    I would like to hear your feedback on how can I make the social media part of my footer stand in the center of the page for mobile width.

    Clipboard landing page

    2
    Thomas Sankara•1,280
    @SankThomasPosted about 4 years ago

    Hello @nganbarova. From what I can tell, the reason it's not centered is because of some margin or padding that you added somewhere. So you can try to reset that and do it manually, or use flexbox as follows:

    display: flex;
align-items: center;
justify-content: center;

    Note that aligning items like that [only] works on block elements

    0