Different size links - Post ID 301762

User 379556 Photo


Registered User
1,558 posts

Mobile First and Desktop Down are described at https://tutorials.coffeecup.com/site-de … sktop-down .

An HTML wrapper is described at https://blog.hubspot.com/website/what-i … er-in-html , and in Site Designer that, of course, means just having a container (<div></div>) into which all the elements on the page are put.

Frank
User 122279 Photo


Senior Advisor
14,547 posts

sfoster95 wrote:

Also fixed copyright info some how the container that holds my footer image and the copywright paragraph
<div class="container custom-sd-two-cols sd-two-cols footer">
was set to grid instead of Flex. Setting it back to Flex fixed the centering issue.


This issue is not fixed for all widths. See the screenshots I have attached; one is from my iPhone, the other from my laptop (1920px wide). You need to set the width slider in SD to its widest, to the right of EVERY breakpoint you may have added. Then set that container centred (margin left and right to auto. When you have got the copyright line centered in wide view, narrow the viewport (move the slider to the left) past your breakpoints - one by one - and see if it still is centered. If not, you need to set the margins to auto again where it breaks.

Of the code bit below I don't think you need the outer classes, 'custom-sd-two-cols sd-two-cols'. It seems to be pertaining to the grid setting you had at first. If you have moved to Flex instead, that class could be removed, leaving just 'container footer' behind. But don't just take my word for it, after all, I have not seen your project file. But you might perhaps experiment with it and see if you can do without it.

<div class="container custom-sd-two-cols sd-two-cols footer">
<nav class="container container-2"><p class="paragraph paragraph-1">All Graphics and Content on this page property of Foster's Creations ©2001-2023.</p></nav>
</div>


Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 3154119 Photo


Registered User
7 posts

Crud I thought I fixed all 3 views. It is centered on my Samsung Galaxy FE20 phone but not on ipad. When I have more time I will take a look at it. I just assumed that the one with footer in the first line of code above is what held my footer background image so didn’t want to take it out. I will see what it does.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.