Changing layout/stacking of buttons in mobile view (webcomic)

Site URL: https://lexiramos.com/comic

Hello, I'm not sure if this is even possible but is there a way to change the layout/order of the buttons with how they appear on mobile? I want them to mirror how they look on the desktop version or at least have "first page" and "latest page" on the same row along with "Next page" "Previous page" on the bottom. I've been trying to make the blog page look more like the webcomic format.  

Mobile view:

Desktop View:

And bonus question, is there a way to create navigation that is similar to the image below, with a buttons linking to the first "blog" page, another linking to the latest and then having "previous" and "next" arrows all lined up in a row? 

Everything I have right now is just from me lurking on the forums and trying to piece together something that mimics a webcomic layout. I have no background/knowledge of css so I have no idea if this type of navigation works in squarespace. 

Q1. Add to Design > Custom CSS

/* Comic mobile */
@media screen and (max-width:767px) {
div#page-section-608361d52b347c1a0f9a6cd8 .span-12>.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
div#page-section-608361d52b347c1a0f9a6cd8 .span-12>.row a {
    padding: 1px !important;
}
div#page-section-608361d52b347c1a0f9a6cd8 .sqs-block {
    padding: 5px !important;
}
}

Q2. Screenshot is 3 icons or 5 icons??

On 7/3/2021 at 1:54 AM, tuanphan said:

Q1. Add to Design > Custom CSS

/* Comic mobile */
@media screen and (max-width:767px) {
div#page-section-608361d52b347c1a0f9a6cd8 .span-12>.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
div#page-section-608361d52b347c1a0f9a6cd8 .span-12>.row a {
    padding: 1px !important;
}
div#page-section-608361d52b347c1a0f9a6cd8 .sqs-block {
    padding: 5px !important;
}
}

Q2. Screenshot is 3 icons or 5 icons??

Thank you! @tuanphan 

For Q2 it is  4 icons. One would link to the very first page, two would be "previous page" "next page" and the last one would link to the latest page. 

This is an example of a website using it https://www.larkandwren.com/woven/2020/2/11/chapter4-pg15 But I think this is something I'll need to hire a web developer/designer for. 

Could you also tell me know to line up the text on the bottom and decrease the padding between the image and pagination? 

On 7/8/2021 at 11:07 PM, LRamos13 said:

Thank you! @tuanphan 

For Q2 it is  4 icons. One would link to the very first page, two would be "previous page" "next page" and the last one would link to the latest page. 

This is an example of a website using it https://www.larkandwren.com/woven/2020/2/11/chapter4-pg15 But I think this is something I'll need to hire a web developer/designer for. 

Could you also tell me know to line up the text on the bottom and decrease the padding between the image and pagination? 

 

Add to Design > Custom CSS

nav.blog-list-pagination {
    margin-top: 5px;
}
@media screen and (max-width:767px) {
nav.blog-list-pagination {
    display: flex;
    align-items: center;
}
nav.blog-list-pagination .next-label {
    font-size: 0 !important;
}
nav.blog-list-pagination .next-label:after {
    font-size: 30px !important;
}
}

On 7/1/2021 at 7:19 PM, LRamos13 said:

Site URL: https://lexiramos.com/comic

Hello, I'm not sure if this is even possible but is there a way to change the layout/order of the buttons with how they appear on mobile? I want them to mirror how they look on the desktop version or at least have "first page" and "latest page" on the same row along with "Next page" "Previous page" on the bottom. I've been trying to make the blog page look more like the webcomic format.  

Mobile view:

 

 

 

Desktop View:

 

And bonus question, is there a way to create navigation that is similar to the image below, with a buttons linking to the first "blog" page, another linking to the latest and then having "previous" and "next" arrows all lined up in a row? 

Everything I have right now is just from me lurking on the forums and trying to piece together something that mimics a webcomic layout. I have no background/knowledge of css so I have no idea if this type of navigation works in squarespace. 

and do you need support with these?

Site URL: https://lexiramos.com/

1. (Tablet/Mobile – Homepage) Make text on the same row

2. (Mobile/Tablet – portfolio design) There is a scroll bar at bottom of the page

https://lexiramos.com/portfolio-/design

3. (Tablet – portfolio design) Word break

https://lexiramos.com/portfolio-/design

4. (Mobile – portfolio design) Reduce white space

https://lexiramos.com/portfolio-/design

5. (Mobile/Tablet – Shop > Products) Make text on the same line

https://lexiramos.com/shop/p/pre-order-hurt-hurt-hurt

6. (Tablet – Contact) Make email not break

https://lexiramos.com/contact

7. (Mobile – Products) Show breadcrumb on top of product.

https://lexiramos.com/shop/p/pre-order-hurt-hurt-hurt

8. (Tablet – Footer) Make copyright on the same line

On 7/20/2021 at 2:50 AM, tuanphan said:

and do you need support with these?

Site URL: https://lexiramos.com/

1. (Tablet/Mobile – Homepage) Make text on the same row

2. (Mobile/Tablet – portfolio design) There is a scroll bar at bottom of the page

https://lexiramos.com/portfolio-/design

3. (Tablet – portfolio design) Word break

https://lexiramos.com/portfolio-/design

4. (Mobile – portfolio design) Reduce white space

https://lexiramos.com/portfolio-/design

 

5. (Mobile/Tablet – Shop > Products) Make text on the same line

https://lexiramos.com/shop/p/pre-order-hurt-hurt-hurt

6. (Tablet – Contact) Make email not break

https://lexiramos.com/contact

7. (Mobile – Products) Show breadcrumb on top of product.

https://lexiramos.com/shop/p/pre-order-hurt-hurt-hurt

8. (Tablet – Footer) Make copyright on the same line

Yes please! @tuanphan

11 hours ago, LRamos13 said:

Yes please! @tuanphan

Q1,2,3. Add to Design > Custom CSS

/* Tablet */
@media screen and (max-width:1024px) and (min-width:768px) {
/* q1. Shop text no wrap */
div#block-4cd380416112eb7e6eab p {
    white-space: nowrap !important;
}
/* q3 packing design */
[data-section-id="6064ae80b46736615c31f207"] .content {
    width: 100% !important;
}
}
/* tablet mobile */
@media screen and (max-width:1024px) {
/* q2 remove scroll bar */
html, body {
overflow-x: hidden;
}
}