width of right frame

[fabian-stoeckl]

Is there a way to decrease the size of the left frame (containing the logo) and increase that of the right frame?

I played around in "jekyll-theme-minimal.scss" with the following width values:

header {
width:270px;
float:left;
position:fixed;
-webkit-font-smoothing:subpixel-antialiased;
}

---

header {
padding-right:320px;
}

---

section {
width:500px;
float:right;
padding-bottom:50px;
}

---

The result looked fine on the PC but didn't work on my mobile phone. I also checked the internet for information but couldn't find any help. Does anyone know?

[Saipraneet]

@fabian-stoeckl, I am trying to edit the width of my right frame to make it wider on PC, but can't seem to to figure out how. Any help is greatly appreciated!

Following the README, I created an assets/css/styles.css file with the following code:

---
---


@import "{{ site.theme }}";

.wrapper {
    width:1110px;
    margin:0 auto;
  }

section {
    width:750px;
    float:right;
    padding-bottom:50px;
  }

This did not result in any change at all though. I also tried moving the wrapper and section code before the @import, but this did not matter either.

Sorry for the noob question, and thanks for your help!

[fabian-stoeckl]

Sorry, back then I just tried around until it worked. But I can't remember.

…

________________________________ From: Sai Praneeth Karimireddy ***@***.***> Sent: Friday, July 16, 2021 2:41:08 AM To: pages-themes/minimal ***@***.***> Cc: fabian-stoeckl ***@***.***>; Mention ***@***.***> Subject: Re: [pages-themes/minimal] width of right frame (#104) @fabian-stoeckl<https://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Ffabian-stoeckl&data=04%7C01%7C%7C88ab362accdb4a0aa52b08d947f26747%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637619928699614171%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=2kQiQEF3ClysH%2F%2BVYZQ92UL2vRWhf2QCFr8oIKqSDhw%3D&reserved=0>, I am trying to edit the width of my right frame to make it wider on PC, but can't seem to to figure out how. Any help is greatly appreciated! Following the README, I created an assets/css/styles.css file with the following code:

--- --- @import "{{ site.theme }}"; .wrapper { width:1110px; margin:0 auto; } section { width:750px; float:right; padding-bottom:50px; } This did not result in any change at all though. I also tried moving the wrapper and section code before the @import, but this did not matter either. Sorry for the noob question, and thanks for your help! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fpages-themes%2Fminimal%2Fissues%2F104%23issuecomment-881096315&data=04%7C01%7C%7C88ab362accdb4a0aa52b08d947f26747%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637619928699624163%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=1JJUxu7oWTjXpLH2vEu%2BY%2BOgLsfEfkt9fVnoWZ%2B63XQ%3D&reserved=0>, or unsubscribe<https://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FATSKR26VFT6UQJSGD7TC2JLTX552JANCNFSM42VHNVUQ&data=04%7C01%7C%7C88ab362accdb4a0aa52b08d947f26747%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637619928699624163%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=kNR5foLRedF8C5ljz6jaKUy5AB8Nb7rwu40sv%2BgwkEM%3D&reserved=0>.

[mambax]

If you still need it, I made it work:
https://github.com/mambax/mambax/blob/a6c364c0a0866b8d422446f44eb5207315636951/assets/css/style.scss#L1

Pay attention, the double lines

---
---

are needed, otherwise it does not apply.

[davorpa]

I recomend use media queries to adress with this kind of things.

Take a look at:

• https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries
• https://css-tricks.com/a-complete-guide-to-css-media-queries/

[DOzernyi]

The solution given here which was cited above didn't work for me, unfortunately. Incorrect layout for mobile devices persisted.
It seems it's better not to touch css/style which imports settings from the jekyll css file in _sass. What worked was to go to that css and change settings for wrapper and for section manually. I am entirely sure why this makes such a difference (mb having to do with overriding the initial css file settings?), but perhaps someone has a similar problem.

[BDHU]

Check my demo here. I modified this theme and put it in another repo. Checking the changes here and here.